 Al's friend
Frank


 Al's friend
Steve


dt_title.JPG (19097 bytes)

Анимация изображений на Web странице

Быстрое начало по созданию анимированных GIF файлов

Создание анимированных GIF файлов


PROFESSIONAL WEB DESIGN - Magic Buttons!

Другая страница!


My Framz Page

 Beth


My Framz Page

 Beth

You have to visit my friend Shannon


My Framz Page

 Beth

You have to visit my friend Shannon

And of course you have to visit Joe at Professional Web Design


So, you want to make a Web Page! - About files

Немного о ФАЙЛАХ

На вашем компьютере, все сохраняется как файл.
Каждый файл имеет расширение файла, которое сообщает миру тип файла.

имя файла ---> diary.txt <--- расширение файла

Файл - просто пакет информации типа изображения или документа. Если Вы хотите организовать ваши файлы и поместить их в хорошие опрятные небольшие группы, вы используете некоторые папки. Папки не имеют расширений, потому что они - не файлы.

Если показываются файлы не совсеми вашими расширениями, Вы можете делать следующее, чтобы заставить их появиться ...

  1. В любои окне (подобном выше) щелкните View.
  2. Щелкните Options...
  3. Щелкните вкладку View
  4. Щелкните Show all files
  5. Убедитесь, что не помечен Hide MS-DOS File Extensions .
  6. Щелкните OK

.txt - обычные текстовые файлы; .gif, .jpg и .bmp - файлы изображений; .mpg и .avi - файлы анимации; .doc и .wri - форматированные документы; .exe - приложения и программы; и .hmtl или .htm - HTML файлы. Они - основа Web Страницы.

Вернемся обратно в учебник!


Put your title here

WELCOME TO MY HOME PAGE!

This is my page and I'm putting lotznlotz of really cool links and pictures and linx to cool places on the web and pictures of my cool friends but only the cool ones cuz nobody wants to look at a page with a bunch of dorks so you'll only find some of my friends here and I almost forgot I gotta give credit to one of my friends who told me that if you put your whole page in a blink tag your whole page BLINKS!!!

This page is under serious construction


Master Page- directory

Directory

Hugh's friends

Ron's friends

Back to the Tutorial


Practice Page- Directory

Directory

Home

Go here
or there

or visit
Yahoo
Netscape


Master Page- directory

Directory

Hugh's friends

Ron's friends

Hugh's girlfriends

Ron's girlfriends

Back to the Tutorial


Directory


Directory

Hugh's friends

Ron's friends


Directory

Hugh's friends

Ron's friends

Al's friends


Directory

Hugh's friends

Ron's friends

Al's friends

Jake's friends


Frames Tutor- Example of a common mistake

 Directory
Link here

Link there

Link to me

Link to you

Here a link

There a link

Everywhere

a Link link


Home Page

dt_title.JPG (19097 bytes)

face1.JPG (6879 bytes) Танюшка | Если Вы новичок в HTML, начните свое обучение под руководством Танюшки, в этом разделе Вы можете поработать с интерактивной обущающей программой... Итак, Вы хотите создать Web Страницу!
face2.JPG (7201 bytes) Айван | Проникните в тайны Ivan's Tablaborotory Таблицы
face3.JPG (7141 bytes) Макс | Только глубоко ограниченные люди обходятся без Фреймов, и то только до встречи с Максом. Фреймы
face4.JPG (6828 bytes) Тото | В постижении нелегкого искусства создания форм Вам поможет Тото (IQ=162) Формы
face5.JPG (5088 bytes) Саид | Восток всегда славился искусством факиров/волшебников, а Microsoft поддержкой JavaScript'ов, пример их использования Вы найдете у Саида Волшебные кнопки
face6.JPG (7084 bytes) Эллочка | Мало анимации не бывает - это Вы узнаете от Эллочки Анимация
face7.JPG (6292 bytes) Dr. Scanner | Запутавшихся в жуткой паутине ресурсов, выручат материалы предоставленные Dr. Scanner'ом Ресурсы Web Страницы
face8.JPG (3846 bytes) Йорик Б. | Он посвятил всю свою жизнь поиску в сети... Линки

Основу этой страницы составил перевод учебных страниц Joe Barta, оригиналы которых Вы можете просмотреть на http://junior.apk.net/~jbarta/

© Copyright 1997 by Bashkir State University


Put your title here

 This space empty for now


Put your title here

 This is my Kewl Homepage. It's gonna have all kinds a neat links and other stuff! Its got some frames too!

My page is UNDER CONSTRUCTION!


Put your title here

I found this, it looks like one of my budz

To go to his homepage CLICK HERE!


A Practice Page- Here

Here

Welcome to here. Here is where everything happens. Here you'll find more neat stuff than you can shake a stick at. Have you ever seen anyone shake a stick at something?? I never have.


A Practice Page- Home

You are home.

Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames!

Enjoy your stay!

Visit Joe at Professional Web Design.


A Practice Page- Home

You are home.

Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames!

Enjoy your stay!


 Hugh's friend
Bill


 Hugh's friend
Bubba


 Hugh's friend
Calvin


 Hugh's friend
Chris


 Hugh's friend
Ed


 Hugh's friend
Jim


Table Tutor- Introduction

dt_title.JPG (19097 bytes)

Таблицы
Учебник 2.02

Введение

Мы дадим Вам несколько простых уроков, как создать таблицы для ваших web документов. Вы могли подумать, что таблица это просто один из таких примероов, но если вы когда-либо видели некоторых из подобных фантастических web страниц, Вы бы заинтересовались, как хорошо используются метки <TABLE> ! Только проиллюстрируем здесь ту же самую страницу с серым фоном и включенными рамками таблицы..
zatrabeoj
В основном речь пойдет о трех 3 метках ...

<TABLE>
Основная метка. Используется, чтобы сообщить браузер «это таблица», наряду с некоторыми атрибутами типа размера, ширины рамки и некоторых других.
<TR>
TableRow определяет горизонтальную строку <TD> (TableData) ячеек.
<TD>
Определяет индивидуальный блок или ячейку в строке таблицы.

Перефразировав: таблица составлена из строк, которые в свою очередь составляют ячейки.

<--Это--- | ст | ро | ка | --Таблицы>
 |  |  | ячейка |
 | ячейка |  |  | ячейка

Сейчас самое время подчеркнуть, если Вы хотите знать, как делать качественные html документы, Вы должны выделить время на изучение меток. Если Вы полагаетесь на так называемые "мастеров таблиц" в "простых как круг html редакторах", Вы значительно ограничите гибкость и конечный результат будет не тот, который Вы стремились достичь. По нашему мнению самые лучшие для использования html редакторы - это редакторы, основанные на текстовых редакторах. Несколько хороших, которые приходят в голову - CMed, HTMLpad и HTML Notepad. Эти редакторы упростят html кодирование. Они не будут пытаться делать это за Вас.

 ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !


So, you want to make a Web Page!

dt_title.JPG (19097 bytes)

Итак, Вы хотите построить
Web Страницу!
Введение

Этот учебник предназначен для пользователей Windows95
Он также смещен в строну Netscape. Но будьте уверены, большинство рассмотренного в учебнике должно работать
также прекрасно и для всех Internet Explorer и других операционных систем.

И так мы хотим дать Вам несколько простых уроков, как построить Web Страницу. Если вы опытны в этом деле, возможно этот учебник вызовет у вас некоторую зевоту.

Это действительно довольно просто. Основная идея - web страница не ничто иное как файл, более точно файл HTML. Он называется HTML, потому что документы web страниц имеют расширение файла .html или .htm. HTML означает Hyper Text Mark-up Language - язык разметки гипертекста . (Если Вам что-то неясно о расширениях файла, просмотрите быстрый обзор ).

Давайте начнем. Сначала, если Вы имеете какой либо из фантастических редакторов HTML и имеете намерение применить его сейчас ... забудьте об этом. Это самый плохой способ обучения. (Хотя есть кое что в них, что Вы можете найти полезным. Они помогут Вам, как только Вы узнаете основы, так что не волнуйтесь о них теперь.) Что является самым лучшим инструментом для изучения HTML? Notepad - Блокнот. Вы, наверное уже получили что - то вроде 9 мегабайтного Wunder Wizzard, который говорит, что этот инструмент делает изготовление web страницы таким же простым, как и почесывание головы. Только доверьтесь нам в этом. (Если вы ищете простой способ изготовить простую страницу тогда, можно сохранить Ваше время и указать Web Wizard)

Другой инструмент, который вам необходим - браузер, для просмотра вашей web страницы. . Netscape Navigator - это то, что мы настоятельно рекомендуем. Если вы используете что-то другое, в большинстве случаев все будет хорошо, но возможны некоторые ограничения.

Таким образом мы можем доверительно сообщить, что Вы - меньше чем в 5 минутах от создания вашей первой web страницы! И так .. к 1 уроку.

 ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


PROFESSIONAL WEB DESIGN - Magic Buttons!

Важное понять здесь то, что мы можем НАЗЫВАТЬ (или маркировать) расположение изображения. Мы использовали imgXX как метку..

Если мы должны переключать это...

<A HREF="target.html"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG
NAME="img01" SRC="clickme1.gif"
width=75 height=22
border=0></A>

<A HREF="target2.html"
onMouseOver="hiLite('img02','clickme4')"
onMouseOut="hiLite('img02','clickme3')"><IMG
NAME="img02" SRC="clickme3.gif"
width=102 height=22
border=0></A>

на это...

<A HREF="target.html"
onMouseOver="hiLite('img02','clickme4')"
onMouseOut="hiLite('img02','clickme3')"><IMG
NAME="img01" SRC="clickme1.gif"
width=75 height=22
border=0></A>

<A HREF="target2.html"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG
NAME="img02" SRC="clickme3.gif"
width=102 height=22
border=0></A>

...мы получим полностью различные эффекты.

ПРОСМОТРИТЕ ЭТО

Фактически, при использовании этого метода, Вы можете вызывать эффекты в любом изображении (ях) из любого другого изображения (й). Все сохраняется непосредственно переменными. Есть другой пример. Он идентичен последнему, за исключением того, что он также активизирует третье изображение.

Есть изображения ...
Сохраните этот [image] как camera_1.gif, а это [image] как camera_2.gif.

И есть код...

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";

clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";

camera_1 = new Image(42,44);
camera_1.src = "camera_1.gif";

camera_2 = new Image(42,44);
camera_2.src = "camera_2.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.html"
onMouseOver="hiLite('img02','clickme4');hiLite('img03','camera_2')"
onMouseOut="hiLite('img02','clickme3');hiLite('img03','camera_1')"><IMG
NAME="img01" SRC="clickme1.gif"
width=75 height=22
border=0></A>

<A HREF="target2.html"
onMouseOver="hiLite('img01','clickme2');hiLite('img03','camera_2')"
onMouseOut="hiLite('img01','clickme1');hiLite('img03','camera_1')"><IMG
NAME="img02" SRC="clickme3.gif"
width=102 height=22
border=0></A>

<IMG NAME="img03" SRC="camera_1.gif"
width=42 height=44
border=0>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Как Вы можете видеть, предложенная методика имеет широкие возможностей. Вы можете помещать эти кнопки в таблицу или внедрять их в форму. Наиболее важная проблема - корректное сохранение переменных.

Теперь мы коснемся нескольких основных стилей кнопок. Первое - простое цветное изменение. Все, что мы делаем, подсвечивание активной кнопки.

* Все изображения кнопок можно захватить внизу этой страницы.

Эта методика делает кнопку "pop up".

А это истинная кнопка. Второе изображение сделано, перемещением содержания первого изображения на одни пиксель ниже и на один пиксель вправо, и изменяя немного края обращения Вы можете это легко выполнить (как только Вы приобретаете навык) в любом графическом редакторе.

Вы можете поместить их в таблицу для эффекта изящной кнопочной панели.

Имеется еще одна вещь, которую мы можем добавлять. Это - функция "onClick" . В дополнение к подсвечиванию кнопки, когда курсор находится над ней, Вы можете заставить кнопку углубляться, когда кто - то нажимает на нее. Есть пример и код.

<A HREF="examples/target.html"
onMouseOver="hiLite('img10','cbutton4')"
onMouseOut="hiLite('img10','cbutton1')"
onClick="hiLite('img10','cbutton7')"><IMG
NAME="img10" SRC="cbutton1.gif"
width=116 height=36
border=0></A>
&nbsp;&nbsp;&nbsp;
<A HREF="examples/target.html"
onMouseOver="hiLite('img11','cbutton5')"
onMouseOut="hiLite('img11','cbutton2')"
onClick="hiLite('img11','cbutton8')"><IMG
NAME="img11" SRC="cbutton2.gif"
width=116 height=36
border=0></A>
&nbsp;&nbsp;&nbsp;
<A HREF="examples/target.html"
onMouseOver="hiLite('img12','cbutton6')"
onMouseOut="hiLite('img12','cbutton3')"
onClick="hiLite('img12','cbutton9')"><IMG
NAME="img12" SRC="cbutton3.gif"
width=116 height=36
border=0></A>

Пара Примечаний:

    1- Не забывайте добавлять наполнение в метки
    2- Мы переместили этот код из этой страницы, так что ссылки imgXX и адресат отражаются что-то.
    3- &nbsp; является кодом для пробела. Мы использовали его, чтобы отделить немного кнопки друг от друга.

    Это - другой эффект, который Вы можете сделать. Перемещение курсора над каждой из связей перемещает маркер в ту связь. Это - пример mouseOver, который изменяет второе изображение ... очень подобный эффекту с камерой. Вещь полностью закрепляется в таблице. Маркер эффекта состоит из 2 изображений, ромба и пустого белого прямоугольника того же самого размера. Меню справа - то же самое, но со включенными рамками таблицы. Если Вам необходима раскраска HTML таблиц, тогда загляните на Таблица.

Вот и все о Волшебных Кнопках. Мы рекомендуем взглянуть на JavaScript resources , чтобы получше познакомиться JavaScript.

Ниже показаны все кнопки, использованные в примерах.

--> <-- (не забывайте пустое изображение)

ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


Frames Tutor- Load 2 (or more) frames with one click

Фреймы - Дополнение
Как загрузить два (или более) фрейма одним щелчком мыши
часть 2

Мы сформировали страницу с фреймами, где Вы можете изменять два фрейма одним щелчком мыши. Теперь мы расширим наше создание. Есть два пути, которыми мы можем развернуть. Мы можем добавлять связи или добавлять фреймы.

Во первых мы добавим связь... подобно этой.

Вам необходимо еще 2 целевых документа. Сохраните это как al_frank.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">

<FONT SIZE=3>Al's friend</FONT><BR>
<FONT SIZE=4>Frank</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

А это сохраните как al_steve.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#33CCCC">

<FONT SIZE=3>Al's friend</FONT><BR>
<FONT SIZE=4>Steve</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Затем, добавьте фрейм каталога (direct.html)...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Al's friends</A><P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО
Все это говорит, если щелчок на "Al's friends" , передается al_frank.html & al_steve.html функции (multiLoad()).

Давайте сделаем еще одно. Нам необходимы еще 2 целевых документах. Сохраните следующее как jake_bob.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">

<FONT SIZE=3>Jakes's friend</FONT><BR>
<FONT SIZE=4>Bob</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

А это сохраните как jake_bub.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFCC66">

<FONT SIZE=3>Jakes's friend</FONT><BR>
<FONT SIZE=4>Bubba</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Теперь добавьте к direct.html...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

<A HREF="javascript:multiLoad('al_frank.html', 'al_steve.html')">Al's friends</A><P>

<A HREF="javascript:multiLoad('jake_bob.html', 'jake_bub.html')">Jake's friends</A><P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Последнее, что мы изучим, как увеличить число фреймов. Самый простой способ вернуться к примеру, когда мы имели только 2 связи в нашем фрейме каталога. Так, редактируйте друзей Ала и друзей Джейка, так вы остались с этим.

Разделим правую сторону на 4 фрейма подобно этому.

Во первых нам необходимо создать еще несколько целевых документов.

Сохраните это как hugh_jim.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Jim</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Это как hugh_bil.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Bill</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Это как ron_paul.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Paul</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

А это как ron_sam.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFCC">

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Sam</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Вы должны теперь иметь в вашей папке (между прочим) ...

1) главную страницу (index.html)
2) каталог страницы (direct.html)
3) восемь целевых документов
     - hugh_ed.html
     - hugh_cal.html
     - hugh_jim.html
     - hugh_bil.html
     - ron_mike.html
     - ron_pete.html
     - ron_paul.html
     - ron_sam.html

Затем мы восстановим нашу главную страницу. Самое лучшее, если мы начнем ее с самого начала. Так, загрузите index.html и сотрите все. Вставьте следующее для начала ......

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

</HTML>

Разделите окно вертикально. В левом мы поместим direct.html, а правое мы будем делить далее.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО (имейте в виду, что это находится под реконструкцией)

Теперь разделите правую сторону пополам горизонтально, поместите пары меток FRAMESET в верхней и нижней половинах.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET>
    </FRAMESET>
    <FRAMESET>
    </FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО (невидимые изменения)

Теперь мы определим, что каждый из этих фреймов далее разделен пополам вертикально.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="50%,50%">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
    </FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО (не видимые изменения)

Вставьте ваши метки FRAME .

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="50%,50%">
      <FRAME>
      <FRAME>
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
      <FRAME>
      <FRAME>
    </FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО

Определите, какие документы загружаются во фреймы вначале.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="hugh_ed.html">
      <FRAME SRC="hugh_cal.html">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="hugh_jim.html">
      <FRAME SRC="hugh_bil.html">
    </FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО

И, наиболее важно, назовите фреймы. (Необходимо назвать только те фреймы, которые изменятся.)

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="hugh_ed.html" NAME="Frame_A">
      <FRAME SRC="hugh_cal.html" NAME="Frame_B">
    </FRAMESET>
    <FRAMESET COLS="50%,50%">
      <FRAME SRC="hugh_jim.html" NAME="Frame_C">
      <FRAME SRC="hugh_bil.html" NAME="Frame_D">
    </FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО (невидимые изменения)

Затем, мы начнем настраивать direct.html. Так он должен выглядеть прямо сейчас...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

</BODY>
</HTML>

Сначала, добавьте в связи, так чтобы все четыре документа передавались функции.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Ron's friends</A><P>

</BODY>
</HTML>

Затем, добавьте в функцию ...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2,doc3,doc4)
{
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
parent.Frame_C.location.href=doc3;
parent.Frame_D.location.href=doc4;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html', 'hugh_jim.html', 'hugh_bil.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html', 'ron_paul.html', 'ron_sam.html')">Ron's friends</A><P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Обратно в учебник.

ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу!


Frames Tutor- Introduction

dt_title.JPG (19097 bytes)

Фреймы
Учебник 2.02

Введение

Мы дадим Вам несколько простых уроков, как построить фреймы для ваших web документов. Разумное использование фреймов может дать вашим страницам более изящный вид и сделает проще их навигацию. Обратите внимание на действующее слово разумное.
zatrabeoj
Деление страницы на фреймы действительно совершенно просто. Основная концепция исходит из того, что каждый фрейм - регулярный, полный html документ. Если Вы хотите разделить вашу страницу на 2 смежных фрейма, то поместите один полный html документ в левый фрейм и другой полный html документ в правый фрейм. Кроме того Вы должны написать третий html документ. Это MASTER PAGE - МАСТЕР СТРАНИЦА содержит метки <FRAME>, которые определяют что, куда и как идет. Фактически, это только функция.

Есть только две основные метки фреймов: <FRAMESET> и <FRAME>. Самый простой способ изучения их состоит в том, чтобы Вы погрузились в проблему и начали делать фреймы.

Сейчас самое время, подчеркнуть, если Вы хотите знать, как делать качественные html документы, тогда Вы должны выделить время на изучение меток. Если Вы полагаетесь на так называемые "мастеров фреймов" в "простых как круг html редакторах", Вы значительно ограничите гибкость и конечный результат будет не тот, который Вы стремились достичь. По нашему мнению самые лучшие для использования html редакторы - это редакторы, основанные на текстовых редакторах. Несколько хороших, которые приходят в голову - CMed, HTMLpad и HTML Notepad. Эти редакторы упростят html кодирование. Они не будут пытаться делать это за Вас.

 ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


Professional Web Design- Web Page Authoring Resources

dt_title.JPG (19097 bytes)

Web Page Resources
A listing of quality resources that would be of use to anyone making a Web Page.

HOME EMAIL SUBMIT RESOURCE

Newest Resources
Lines, Buttons & Bullets |  | Photos & Images
Backgrounds & Textures |  | Java & JavaScript
Sounds | VRML | HTML | Tools
CGI Scripting |  | Miscellaneous


Form Tutor- Introduction

dt_title.JPG (19097 bytes)

Формы
Учебник 2.02

Введение

В этом учебнике Мы покажем Вам, как добавить интерактивность в ваши web документы посредством метки <FORM> . С меткой формы Вы можете добавлять к вашей web странице гостевую книгу, формы заказов, оборы, получать обратную связь или что-то подобное.

Основная конструкция html формы это...

  <FORM>    начала формы
  <INPUT>   запрос на информацию одним из нескольких различных способов...
  <INPUT>   ...по желанию может быть много входных областей
  </FORM>   конец формы

Вы теперь готовы делать некоторые формы! Сейчас самое время, подчеркнуть, что, если Вы хотите знать, как делать качественные html документы, тогда Вы должны выделить время на изучение меток. Если Вы полагаетесь на так называемые "мастеров форм" в "простых как круг html редакторах", Вы значительно ограничите гибкость и конечный результат будет не тот, который Вы стремились достичь. По нашему мнению самый лучшие html редакторы для использования - это редакторы, основанные на текстовых редакторах. Несколько хороших, которые приходят в голову - CMed, HTMLpad и HTML Notepad. Эти редакторы упростят html кодирование. Они не будут пытаться делать это за Вас.

Хотя этот учебник не "оптимизирован " для любого браузера, он написан для использования Netscape Navigator. Если Вы используете MS Internet Explorer, некоторые элементы не могут быть поддержаны или могут быть предоставлены немного по-другому.

 ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Итак, Вы хотите построить Web Страницу !


PROFESSIONAL WEB DESIGN - Magic Buttons!

dt_title.JPG (19097 bytes)

Как добавить...
Волшебные кнопки
...в вашу страницу.

Мы собираемся обучить Вас, как делать Волшебные Кнопки! Хотя это выполнено с помощью JavaScript, мы не будем давать детальные объяснения включаемого кода. Мы дадим Вам некоторые основные команды. Если Вы хотите узнать механику JavaScript, мы рекомендуем посетить Java & JavaScript resources page.

Еще одно примечание ... Microsoft Internet Explorer не поддерживает JavaScript, представленный здесь. Так как создание сценария вызывает сообщения об ошибках в Explorer, мы добавили фильтр, который ищет Netscape Навигатора. Если ваш браузер не Netscape, Вы не будете видеть специальные эффекты.

Это - связь. Если Вы нажимаете на ней, Вы будете направлены на другую страницу.

Идея этого проста. Внутри html документа - сценарий. Этот сценарий указывает браузеру, выполнить что-то. В предыдущем примере сценарий говорит:

1. Загрузить и отобразить это изображение -

2. Когда курсор помещается над этим изображением, немедленно заменить его на это изображение -

3. Когда курсор уходит от изображения, заменить его на первоначальное изображение -

4. Если произведен щелчок на изображении, Вы будете перенаправлены на другую страницу.

5. Повторить по мере необходимости.

Теперь сформируем этот эффект постепенно, шаг за шагом.

Запустите Notepad и разместите его новое окно Netscape рядом. (В качестве альтернативе Notepad, можно рекомендовать EditPad.

Начните с этого:

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Сохраните это как magic.html в новой папке (пользователи Windows 3.x сохраняют как magic.htm)

Затем вам потребуется пара изображений. Сохраните это изображение [image] как clickme1.gif и это [image] как clickme2.gif.

Самое время создать целевой документ...

<HTML>

<HEAD>
<TITLE>Magic Buttons Target</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<H1 ALIGN=center>* TARGET *</H1>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Сохраните это как target.html

Вы должны теперь иметь папку с четырьмя элементами в ней: magic.html, target.html, clickme1.gif и clickme2.gif.

Вновь откройте magic.html и добавьте следующее ...

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

Обратите внимание, что это идет внутри метки <HEAD> , а не в метках <BODY>.

Затем вставьте фильтр браузера.

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

Этот текст говорит - Если браузер - Netscape Navigator, используйте следующий сценарий. Если браузер - не Navigator, игнорируйте сценарий.

Затем, добавьте следующее. Зеленый и синий тексты - это вещи, которые Вы встраиваете. Зеленый - для имени и размерностей первого изображения, а синий - для имени и размерностей второго изображения. Размерности - это ширина и высота (width,height).

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

Мы выполнили создание сценария в метке <HEAD>.

Теперь мы запишем метку <IMG>. Обратите внимание IMG NAME в фиолетовом цвете. Каждое пятно, в которое мы помещаем изображение, нуждается в уникальном имени (или метке) так, когда сценарий начинает переключать изображения, он знает точно какое изображение поместить где. Для этого примера img01 будет делать только прекрасно. Также встраивается имя первого изображения и его размерности.

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Все это отображает изображение. Вплоть до этого места все, что мы сделали, должно определить несколько переменных и функции.

Теперь добавьте информацию связи и немного больше JavaScript.

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.html"
onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01"
SRC="clickme1.gif" width=75 height=22 border=0></A>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Создание более одной кнопки немного сложнее. Не требуется много, чтобы сгенерировать известные JavaScript Сообщения об ошибках JavaScript Error.

Следующие переменные мы использовали к настоящему времени:

clickme1 | - оригинальное изображение
clickme2 | - заменяющее изображение
img01 | - метка изображения
target.html | - целевой документ

Мы добавим вторую часть «Волшебных Кнопок», используя следующие переменные ...

clickme3 | - | второе оригинальное изображение
clickme4 | - | второе заменяющее изображение
img02 | - | метка второго изображения
target2.html | - | второй целевой документ

Сохраните [image] как clickme3.gif.
Сохраните [image] как clickme4.gif.

Сохраните следующее как target2.htm

<HTML>

<HEAD>
<TITLE>Magic Buttons Target</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<H1 ALIGN=center>* TARGET TOO! *</H1>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Добавьте переменные операторы сценария в метке <HEAD> .

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";

clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.htm"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01"
SRC="clickme1.gif" width=75 height=22 border=0></A>

</BODY>

</HTML>

Теперь поместите начальное изображение.

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";

clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.htm"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01"
SRC="clickme1.gif" width=75 height=22 border=0></A>

<IMG NAME="img02" SRC="clickme3.gif" width=102 height=22 border=0>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Теперь добавьте информацию связи и команды JavaScript.

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";

clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.htm"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01"
SRC="clickme1.gif" width=75 height=22 border=0></A>

<A HREF="target2.html"
onMouseOver="hiLite('img02','clickme4')" onMouseOut="hiLite('img02','clickme3')"><IMG NAME="img02"
SRC="clickme3.gif" width=102 height=22 border=0></A>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО

Имеется та же самая страница со всеми вставными высвеченными переменными. Мы заключили пару строк в метки <NOBR> (nobreak) для удобства чтения.

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";

clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.html"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG
NAME="img01" SRC="clickme1.gif"
width=75 height=22
border=0></A>

<A HREF="target2.html"
onMouseOver="hiLite('img02','clickme4')"
onMouseOut="hiLite('img02','clickme3')"><IMG
NAME="img02" SRC="clickme3.gif"
width=102 height=22
border=0></A>

</BODY>

</HTML>

ПРОСМОТРИТЕ ЭТО (снова)

Далее...

ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


Frames Tutor- Load 2 (or more) frames with one click

Фреймы - Дополнение
Как загрузить два (или более) фрейма одним щелчком мыши

Пример 1.

Пример 2.

Сформируем первый пример с самого начала. Прежде, чем начать, позвольте обратить внимание, что эти инструкции предназначены пользователям Windows95 (или любой операционной системы, которая может иметь дело с длинными именами файлов). Если вы управляете Windows3.x, вы должны использовать расширение файла .htm и соответственно скорректировать сценарий.

Сначала вам будут необходимы несколько целевых документов. Скопируйте следующее и сохраните как hugh_ed.html где-нибудь в новой папке.

<htm>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Ed</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Сохраните это как hugh_cal.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Calvin</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Сохраните это как ron_mike.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Mike</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

А это сохраните как ron_pete.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Pete</FONT>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Вы должны теперь иметь папку с четырьмя документами в ней...

  1. hugh_ed.html
  2. hugh_cal.html
  3. ron_mike.html
  4. ron_pete.html

Затем вам будет необходима главная страница. Она будет иметь левый фрейм "каталога", а правая сторона будет разделена пополам горизонтально. Сохраните следующее как index.html.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME>
  <FRAMESET ROWS="50%,50%">
    <FRAME>
    <FRAME>
  </FRAMESET>
</FRAMESET>

</HTML>

Затем, мы должны определить то, что будет помещено в каждый фрейм, при загрузке страницы. (Мы пока не сделали direct.html)

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="hugh_ed.html">
    <FRAME SRC="hugh_cal.html">
  </FRAMESET>
</FRAMESET>

</HTML>

И, особенно важно для того, что мы делаем здесь, Вы обязаны дать каждому фрейму ИМЯ. Точнее только тем фреймам, которые изменяются. В нашем примере, фрейм каталога никогда не изменяется, так что мы не должны называть его.

<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>

<FRAMESET COLS="160,*">
  <FRAME SRC="direct.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="hugh_ed.html" NAME="Frame_A">
    <FRAME SRC="hugh_cal.html" NAME="Frame_B">
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО ( (Имейте в виду, что мы пока не создали каталог страницы))

А это для главной страницы.

Следующая вещь, которую мы должны создать - каталог страницы. Начните с этого и сохраните это как direct.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

</BODY>
</HTML>

Теперь, если Вы загрузите index.html, каждый фрейм заполнится. ПРОСМОТРИТЕ ЭТО

Все что осталось, так это добавить информацию связей и команды JavaScript в direct.html. Сначала добавьте связи.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

Hugh's friends<P>

Ron's friends<P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Теперь заключите связи в метки анкера.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО (невидимые изменения)

Есть, где запутаться, вы должны двигаться осторожно и медленно.

Во первых, вставьте набор меток JavaScript в <HEAD> документа. Удостоверитесь, что это находится в метке HEAD и не внутри метки BODY.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО (невидимые изменения)

Теперь вставьте сценарий. Не задумывайтесь пока о том, что это означает. Пока только вставьте его.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО (невидимые изменения)

Затем завершите связи.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
  parent.Frame_A.location.href=doc1;
  parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО

Затем мы будем видеть точно, что случается.

В части связи ...

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

... Вы просто вставляете имена html файлов. В метке head мы помещаем функцию. Это называется функцией, потому что она выполняет действие. В нашем упражнении мы назвали функцию multiLoad(). И мы вызываем multiLoad('hugh_ed.html', 'hugh_cal.html') или multiLoad('ron_mike.html', 'ron_pete.html') в зависимости от того, на какой связи произведен щелчок.

Больше...

В части функции...

function multiLoad(doc1,doc2)
{
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}

...... мы определяем функцию.

В нашей функции multiLoad(doc1,doc2), мы посылаем ей hugh_ed.html,hugh_cal.html или ron_mike.html,ron_pete.html в зависимости от того, на какой связи произведен щелчок.

Следующие две строки в коде определяют, что делать с hugh_ed.html, и т.д....

1- Поместить doc1 в Frame_A (doc1 первый параметр, который был передан к функции - hugh_ed.html)
2- Поместить doc2 в Frame_B (doc2 второй параметр, который был передан к функции - hugh_cal.html)

Более...

ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу!


 Jakes's friend
Bob


 Jakes's friend
Bubba


My Framz Page

 Kim


Form Tutor- Lesson 1

Формы - Урок 1

Откройте Notepad и следуйте пунктам учебника. Скопируйте и вставьте с этой страницы следующее для начала:

<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Сохраните это как form1.html в какой-нибудь папке (пользователи Windows 3.x сохраняют это как form1.htm). Запустите ваш браузер [Netscape]. Используйте его, чтобы открыть form1.html и запустите Блокнот и браузер рядом. Таким способом Вы можете создавать ваши страницы и почти мгновенно просматривать результаты вашей ручной работы. Если при нажатии кнопки перезагрузки все не сбрасывается, нажимайте кнопку перезагрузки при нажатой клавише Shift.

Наберите ваши метки формы.

<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>

<FORM>
</FORM>

</BODY>
</HTML>

Затем мы должны сообщить браузеру, куда послать данные, которые мы накапливаем и как послать их. Есть две основные функции, которые Вы можете выполнять. 1) Вы можете посылать данные cgi сценарию для обработки или 2) Вы можете иметь данные, присланные по электронной почте Вам. Что касается первой, кто бы ни написал, сценарий может сообщать Вам, как данные должны быть посланы. Вторая, или форма mailto должна иметь следующие атрибуты в метке <FORM>.

Обратите внимание, что Microsoft Internet Explorer 3.0 не поддерживает формы mailto. Когда Вы пробуете представлять на рассмотрение информацию, появляется новое окно сообщения почты. Проводник однако поддерживает формы, посланные сценарию CGI.

<HTML>
<HEAD>
<TITLE>Joe's the handsomest guy I know</TITLE>
</HEAD>
<BODY>

<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
</FORM>

</BODY>
</HTML>

Эта строка очень важна. Единственная вещь, которую Вы должны сделать - вставить ваш адрес электронной почты после mailto: Остальное должно быть написано точно как показано. Слова в FORM, METHOD, POST и ACTION не должны быть набраны прописными буквами, но должен быть пробел между каждым атрибутом ... между FORM & METHOD, между POST & ACTION, и между .com" & ENCTYPE.

К сожалению данные будут посланы Вам в этом 'только для компьютера' формате .....

FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CA

Вам будет необходима программа для перевода его в 'человеческий' формат ...

FORMNAME=New Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA

Mailto Formatter - превосходная небольшая утилита свободно распространяемая, которая выполняет эту работу легко и приятно.

Пример выше иллюстрирует что, форма не больше чем входные имена (NAME, ADDRESS, etc) спаренные с входными значениями (R.U. Havinfun, 1313 Mockingbird Lane, etc).Единственная реальная переменная - как мы получаем значения.

Некоторые почтовые программы способны преобразовать данные без обращения к отдельной программе. Вы можете опробовать этот метод сначала. Только удалите команду ENCTYPE="application/x-www-form-urlencoded" и вместо нее используйте ENCTYPE="text/plain".

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Итак, Вы хотите построить Web Страницу !


So, you want to make a Web Page!- Lesson 1

Итак, Вы хотите построить Web Страницу!
Урок 1

Запустите Notepad и начните с этого...

<HTML>
</HTML>

Каждое предложение выше называется меткой - tag. Есть начальная метка и конечная метка. Чтобы сделать конечную метку, необходимо только добавить / к начальной метке. Большинство меток, но не все, имеют конечную метку.
Представляйте себе, что метки говорят браузеру, или еще лучше предоставляют ему команды. Так Вы только что сообщили браузеру 'это начало HTML документа' (<HTML>) , а 'это конец HTML документа' (</HTML>). Теперь Мы должны поместить некоторое наполнение между этими метками.

Каждому документу HTML необходима пара меток HEAD - Шапка.

<HTML>
<HEAD>
</HEAD>
</HTML>

Единственная вещь, которой мы должны коснуться в метках HEAD (пока) - метки TITLE.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

А большая часть страницы должна быть внутри меток BODY.

<HTML>
<HEAD>
<TITLE></TITLE>
<BODY>
</BODY>
</HEAD>
</HTML>

Еще одна вещь, дайте вашему документу титул - заголовок..

<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
<BODY>
</BODY>
</HEAD>
</HTML>

Теперь сохраните это, не как текстовый документ, а как html документ. Сохраните это как page1.html где-нибудь в новой папке. Если вам все еще неясно, как это сделать, тогда в вашем окне Notepad щелкните File и затем Save as.

Вам будет представлено диалоговое окно. Создайте новую папку щелчком на - > [image]. Назовите как хотите. Затем двойной щелчок на ней, чтобы открыть ее. В поле File name: наберите page1.html , удостоверитесь, что поле Save as type: сообщает All Files(*.*).
Нажмите Enter и вы выполнили сохранение!

Поздравляем! Вы - создатель полностью функциональной Web Страницы! Вы могли бы передать ее на сервер и целый мир может видеть ваше создание! Если Вы используете Netscape, то файл, который Вы создали должен выглядеть что-то вроде этого ...

(Если ваша пиктограмма Netscape немного отлична, это не имеет никакого значения)

Вы можете дважды щелкнуть на ней и увидеть результаты вашей ручной работы.

К сожалению, как Вы можете видеть, страница пустая (но она, все же, законный документ HTML!). Следующим по порядку делом должно быть наполнение вашей страницы.

Но прежде, чем мы продолжим, я хочу отметить два момента. Один, то что Вы сделали - это скелетный документ HTML. Это - минимально требуемая информация для web документа и всех web документов, которые должны содержать эти базисные компоненты. И второе, заголовок документа - это то, что появляется в самой верхней части окна браузера.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


Frames Tutor- Lesson 1

Фреймы - Урок 1

В этом учебнике нам будут необходимы несколько html документов. Запустите Notepad и скопируйте следующее для начала.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Дадим каждому документу имя.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Lisa
</BODY>
</HTML>

Создайте новую папку, где-нибудь и сохраните, это как lisa.html (пользователи Windows 3.x сохраняют это как lisa.htm).

Замечание - Мы будем делать ссылки на документы как xxxx.html. Пользователи Windows 3.x будут должны использовать расширение файла .htm при работе с документами локально. Многие программы FTP позволяют Вам изменять имя файла при передаче, если Вам необходимо.

Теперь сделайте другой html документ.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Terri
</BODY>
</HTML>

Сохраните его в той же самой папке как terri.html.

Теперь сделайте то же самое для Kim, Tina, Shannon, и Beth. Сохраните их точно так же как и другие. Вы теперь имеете папку, в которой содержится 6 полных автономных html документов.

Хорошо, теперь сделаем вашу Мастер Страницу. Начните с этого...

<HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page</TITLE>
</HEAD>

<BODY>
</BODY>

</HTML>

Удалите метки <BODY> . Они не используются в Мастер Странице...

<HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page</TITLE>
</HEAD>

</HTML>

Мастер Страница использует вместо них метки <FRAMESET>.

<HTML>
<HEAD>
<TITLE>My Framz Page- The Master Page</TITLE>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>

Чтобы сосредоточиться на основном, мы не будем записывать метки <HTML>, <HEAD> и <TITLE>. Разумеется, Вы сохраняете их в вашем документе.

<FRAMESET>
</FRAMESET>

Теперь самое время сохранить документ. Сохраните его в вашей папке (со всеми документами с именами девушек) как index.html. Если Вы попробуете открыть его вашим браузером, то он будет пустым. Все, что Вы пока сказали - "Это - моя Мастер Страница".

Теперь давайте начнем определять вид. Сообщим браузеру разделить основное окно на 2 колонки, каждая расположена в пределах 50 % окна..

<FRAMESET COLS="50%,50%">
</FRAMESET>

Они все еще будут пустыми, мы должны выполнить еще одну операцию прежде, чем наша система станет функционировать.

Мы должны сообщить браузеру, что поместить в каждый фрейм.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО. Вы теперь гордый создатель полностью функциональной страницы с Фреймами!

Одно последнее замечание прежде, чем мы продолжим. Обратите внимание, что <FRAMESET> - метка контейнер, а <FRAME> нет. Метка контейнер имеет открывающуюся <МЕТКУ> и заключительную </МЕТКУ>.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


Table Tutor- Lesson 1

Таблицы - Урок 1

В этом учебнике нам будут необходимы несколько html документов. Запустите Notepad и скопируйте следующее для начала:

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Сохраните это как table1.html в некоторой папке (пользователи Windows3.x сохраняют это как table1.htm). Создайте для этого новую папку, потому что мы будем помещать туда и другое. Запустите ваш браузер [Netscape]. Используйте его, чтобы открыть table1.html и запустите Notepad рядом с браузером. Таким способом Вы можете создавать ваши страницы и почти мгновенно просматривать результаты вашей ручной работы. А Вы думали, что Вам необходимы 9 мегабайтные 'Мастера'..

Наберите ваши метки таблицы. Они просто означают «начало таблицы» и «окончание таблицы».

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

<TABLE>
</TABLE>

</BODY>
</HTML>

Каждая таблица нуждается по крайней мере в одной строке.

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR>
</TR>
</TABLE>

</BODY>
</HTML>

И конечно каждая строка должна иметь по крайней мере одну ячейку данных..

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Теперь, только для концентрации внимания на основных моментах и экономии времени мы будем записывать только то, что находится в метках таблицы. Мы не буддем учитывать шапку, тело, заголовок и т.д. с этого момента. Само собой разумеется, Вы сохраняете их в вашем документе.

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

Теперь Вам необходимо что - то поместить в эту ячейку. Давайте поместим Ed в <TD> ячейку.

<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Теперь, Вы автор полностью функциональной html таблицы! Откройте ее браузером и проверьте ее извне! Если вы сделали все правильно ваша таблица может выглядеть подобным образом:

Ed

Вы видели, как легко Вы создали первую таблицу

<--ОБРАТНО  ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !


Form Tutor- Lesson 2

Формы - Урок 2

Чтобы сосредоточить мысли на основном, мы не будем записывать метки <HTML>, <HEAD> и <TITLE>. Разумеется, Вы сохраняете их в вашем документе. Мы будем записывать только то, что появляется внутри меток <FORM>.

Наиболее общий ТИП - TYPE формы <INPUT> - TEXT.

<INPUT TYPE=TEXT>

Каждому вводу необходимо ИМЯ - NAME.

<INPUT TYPE=TEXT NAME="ADDRESS">

Когда пользователь набирает свой адрес (например 1313 Mockingbird Lane), он становится значением ввода и будет спарен с ADDRESS, так что конечный результат после выполнения Mailto Formatter будет

ADDRESS=1313 Mockingbird Lane.

Мы можем, по желанию, набрать в VALUE.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">

Это автоматически соединит значение 44 Cherry St с именем ADDRESS, пока пользователь не изменит его. Примечание, убедитесь, что использовали кавычки там, где показано.

Мы можем определять размер текстового блока диалога.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>

Как Вы можете видеть, значение по умолчанию - 20.

Удалите VALUE="44 Cherry St".

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>

Если мы хотим, мы можем определить, сколько символов пользователь может вводить. Попробуйте ввести более 10 символов!

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>

Очень похож на TYPE=TEXT - TYPE=PASSWORD. IЭто - точно тот же самое, за исключением отображения *** вместо фактического ввода. Браузер пошлет Вам ввод, но он не будет отображать его.

<INPUT TYPE=PASSWORD>

Не забудьте, что каждый <INPUT> должен иметь NAME.

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

Атрибуты SIZE, VALUE и MAXLENGTH работают здесь также. Между прочим, <МЕТКА> сообщает браузеру что сделать. АТРИБУТ помещается внутри <МЕТКИ> и сообщает браузеру, как делать это..

Затем - Кнопки переключатели и Переключатели. Кнопки переключатели позволяют пользователю выбирать одну из отдельных опций. Переключатели позволяют пользователю выбирать один или больше, или все параметры.
Сначала давайте сформируем некоторые Кнопки переключатели - Radio Buttons.

<INPUT TYPE=RADIO NAME="BEST FRIEND">

Щелкните на кнопке.

Теперь добавьте еще 2.

<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">

Предполагаем поместить прерывание строки после каждого.

<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><P>

Обратите внимание, что каждый ввод имеет то же самое имя. Причина станет очевидной очень скоро.

Каждой из Кнопок переключателей должно быть назначено значение - VALUE.

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>

Теперь пометим каждую кнопку.

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

Ed Holleran
Rick Weinberg
Tom Studd

Вы можете также заменить эти метки другими метками html по желанию.

По существу ваши Кнопки переключатель созданы. Вы можете добавить инструкцию выше кнопок и, если хотите, выбрать значение по умолчанию.

Кто ваш лучший друг?<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

Кто ваш лучший друг?
Ed Holleran
Rick Weinberg
Tom Studd

Пользователь конечно может только выбрать одну опцию. Его выбор будет возвращен Вам как спарка имя/значение, например, BEST FRIEND=Ed .

Формирование Переключателей - Check Boxes - практически то же самое. Начните с этого.

<INPUT TYPE=CHECKBOX NAME="Ed">

Щелкните на переключателе.

Добавьте еще 3, но на сей раз дайте каждому различное ИМЯ - NAME. (Также добавьте прерывания строк, если хотите)

<INPUT TYPE=CHECKBOX NAME="ED"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX NAME="BM"><P>

Каждый Переключатель получает то же самое ЗНАЧЕНИЕ - VALUE.

<INPUT TYPE=CHECKBOX NAME="ED"
VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>

Обратите внимание, Переключатели изменили имена, ими стали ЗНАЧЕНИЯ Кнопок переключателей, а измененные ЗНАЧЕНИЯ одни и те же.

Хорошо, давайте маркировать каждый блок.

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

И наконец, Вы можете добавить что-то выше ваших переключателей и возможно выбрать значения по умолчанию.

Кто из этих парней ваши друзья?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

Кто из этих парней ваши друзья?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

Пользователь может выбрать 1, 2, ни одного или все параметры. Их выборы будут возвращены Вам, как спарки имя/значение, например,

Ed=YES
Tom=YES

Теперь вопрос, который мог бы прийти в голову, а что, если я хочу задать 3 различных вопроса о той же самой группе парней?

Хорошо, мы покажем, как это сделать.

Кто из этих парней являются вашими друзьями?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister 		Кому из этих парней Вы одолжили бы деньги?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister 		Кому из этих парней Вы доверили бы вашу сестру?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

Истинно что в каждой форме никогда не должны быть дубликатов ИМЕН. Так, возможно мы могли бы использовать различное имя для каждого вопроса.

Далее следует html для этих 3 вопросов. Метки <TABLE> зеленые. Они только для вида и не воздействуют на работу формы. Если Вам необходимо раскрасить вашу <TABLE>, смотрите Таблицы.

<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>

<TD WIDTH=199>
Кто из этих парней являются вашими друзьями?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=200>
Кому из этих парней Вы одолжили бы деньги?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=199>
Кому из этих парней Вы доверили бы вашу сестру?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BM" VALUE="YES"> Burgermeister<P>
</TD>

</TR></TABLE>
</CENTER>

Предположим, что пользователь отметил следующие переключатели...

Кто из этих парней являются вашими друзьями?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister 		Кому из этих парней Вы одолжили бы деньги?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister 		Кому из этих парней Вы доверили бы вашу сестру?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister

...... выполнение этого послало бы Вам следующие пары имя/значение.

Friend?..Ed=YES
Friend?..Rick=YES
Friend?..Tom=YES
Lend money?...Tom=YES
Lend money?...BM=YES
Date sister?...Ed=YES
Date sister?...Tom=YES
Date sister?...BM=YES

Вот и все!

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Итак, Вы хотите построить Web Страницу !


So, you want to make a Web Page!- Lesson 2

    И так, Вы хотите построить Web Страницу!
    Урок 2

Для подчеркивания выполняющихся действий мы будем писать только то, что находится в пределах меток <BODY> . Мы будем опускать метки <HTML>, <HEAD> и <TITLE>. Само собой разумеется, Вы сохраняйте их в вашем документе.

<BODY>
<BODY>

Наберите что-то, действительно свежее.

<BODY>
Something really cool
<BODY>

Something really cool

Всякий раз, когда Вы делаете изменения в вашем документе, обязательно сохраняйте его, а затем нажимайте кнопку Reload на панели вашего браузера. В некоторых случаях, нажатие только кнопки Reload не вызывает действий ... в таком случае нажмите SHIFT + Reload.

Первое дело, которую мы собираемся изучить - как изменить цвет фона. Мы думаем, вы согласитесь, что серый фон довольно ущербный.

<BODY BGCOLOR="#FFFFFF">
Something really cool
<BODY>

Something really cool

FFFFFF - Компьютерный код для белого цвета. Есть и много других.
Note- Netscape Обратите внимание, что - Netscape отображает только 216 цветов на web странице. Если Вы определяете цвет отличный от этих цветов, Netscape выберет самое близкое соответствие.

Вы можете определять изображение для фона.

<BODY BACKGROUND="swirlies.gif">
Something really cool
<BODY>

Здесь использовано фоновое изображение
Вы найдете это изображение (swirlies.gif) в папке с именем pics. Если Вы просматриваете этот фрагмент интерактивно Netscape, щелкните правой кнопкой мыши на изображении и выберите в динамическом меню Save Image As...

Возможно довольно очевидно, что изображение мозаично. Если Вы используете длинное тощее изображение, Вы можете получить эффект подобный этому ...

<BODY BACKGROUND="bluebar.gif">
Something really cool
<BODY>

Здесь использовано фоновое изображение

(Это - фактически 800x2, но я сжал его до 530x2, так что оно удовлетворит всякому экрану)

Давайте возвратимся к простому старому белому экрану..

<BODY BGCOLOR="#FFFFFF">
Something really cool
<BODY>

Something really cool

Мы можем выделять фрагменты полужирным шрифтом.

<BODY BGCOLOR="#FFFFFF">
Something really <B>cool</B>
<BODY>

Something really cool

Мы сообщаем браузеру: с <B> начать полужирный текст и завершить его на </B> .

Тот же самый принцип применяется к курсиву ...

<BODY BGCOLOR="#FFFFFF">
Something <I>really</I> <B>cool</B>
<BODY>

Something really cool

...и подчеркиванию.

<BODY BGCOLOR="#FFFFFF">
<U>Something</U> <I>really</I> <B>cool</B>
<BODY>

Something really cool

Обратно снова к простому белому экрану.

<BODY BGCOLOR="#FFFFFF">
Something really cool
<BODY>

Something really cool

Мы можем использовать метки и в комбинации.

<BODY BGCOLOR="#FFFFFF">
Something really <I><B>cool</B></I>
<BODY>

Something really cool

Это - пример вложенных меток. Если Вы собираетесь использовать пары меток в комбинации (возможно Вы будете делать это редко), то для избежания путаницы браузера, они должны быть вложены без перекрытия. Позвольте проиллюстрировать ......

   <THIS><THAT></THIS></THAT> Перекрывающиеся метки .... плохо
   <THIS><THAT></THAT></THIS> Вложенные метки .... хорошо

Очень полезный тип текстового эффекта - шрифт символов одинаковой ширины (mono-spaced) или TeleType.

<BODY BGCOLOR="#FFFFFF">
<TT>Something really cool</TT>
<BODY>

Something really cool

Каждый символ использует одинаковое горизонтальное пространство.

Это обычный тип-> iiiiiiiiii
oooooooooo
mmmmmmmmmm
Это одноширинный тип (monospaced) -> iiiiiiiiii
oooooooooo
mmmmmmmmmm

Мы можем так же изменить размер шрифта... Это довольно просто!

В начале добавьте метку <FONT> ...

<BODY BGCOLOR="#FFFFFF">
Something really <FONT>cool</FONT>
<BODY>

Затем определите атрибут размера - SIZE.

<BODY BGCOLOR="#FFFFFF">
Something really <FONT SIZE=6>cool</FONT>
<BODY>

Something really cool

Шрифты поступают 7- ми размеров:

крошечный | малый | регулярный | дополнительный | Большой | Реальный | Вопли!
1 | 2 | 3 | 4 | 5 | 6 | 7

Две вещи я хотел бы обсудить теперь. Во первых <МЕТКА> сообщает браузеру что сделать .. АТРИБУТ помещается внутри <МЕТКИ> и сообщает браузеру, как сделать это..
Второе замечание о значениях по умолчанию. Поскольку Вы возможно знаете, что значение по умолчанию - это значение, которое браузер принимает, если Вы не сообщили ему другое. Хороший пример - размер шрифта. Заданный по умолчанию размер шрифта 3. Если Вы не сообщаете ничего, шрифт будет размером 3.

Размер транслируется в 3 для наших целей и цвет черный. Теперь с Netscape 3.0 мы можем определять другие имена шрифтов, отличные от значения по умолчанию. Например ARIAL и COMIC SANS.

<BODY BGCOLOR="#FFFFFF">
Something really <FONT FACE="ARIAL">cool</FONT>
<BODY>

Something really cool

Шрифт будет отображаться только в том случае, если шрифт вашей программы просмотра установлен на компьютере пользователя. Позвольте повторить ... Если человек, рассматривающий страницу на компьютере, на котором не установлен шрифт, определенный Вами, тогда он будет видеть только заданный по умолчанию шрифт. Так будьте очень благоразумны в использовании шрифтов. Arial и Comic Sans MS довольно широко распространены с Windows.

Но Вы можете несколько себя застраховать, определяя более чем один шрифт. Только делайте так ... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>.
Браузер ищет вначале ARIAL. Если находит его, то использует его. Если нет, то ищет HELVETICA. Если не может найти и этот шрифт, то ищет LUCIDA SANS. И если не может найти и этот шрифт, то использует заданный по умолчанию шрифт.

Теперь самое хорошее время, чтобы сказать немного о синтаксисе. Обратите внимание, здесь и там мы используем кавычки, они важны. Вы понятия не имеете, сколько раз Вы будете делать страницу и она будет вся искажена ... Все искажения из-за отсутствия одной кавычки или помещения не на то место маркера кавычки или отсутствия пробела. Когда-нибудь мы уйдем от этого вида кодирования, но пока мы должны быть внимательными. Другое дело - использование ЗАГЛАВНЫХ БУКВ для большинства меток. Это - только личное предпочтение. Мы полагаем, что метки выделяются больше при использовании всех заглавных букв. Вы могли бы точно также использовать <font> вместо <FONT>. Вы даже можете использовать <fOnT>.

Продолжим

Вы можете изменять цвет шрифта, если находите это приятным.

<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000">cool</FONT>
<BODY>

Something really cool

Мы можем, конечно использовать больше чем один АТРИБУТ в <МЕТКЕ> ......

<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000"
FACE="ARIAL" SIZE="7">cool</FONT>
<BODY>

Something really cool

Добавим еще!

<BODY BGCOLOR="#FFFFFF">
Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U>
<BODY>

Something really cool

Заметим еще раз, что многократные метки должны быть вложены.

<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>

Не имеет значение, какая метка является первой. Если Вы хотите сделать что-то красным и полужирным, то Вы должны сделать одно и потом другое. Вы можете размещать метки в любом порядке, каком хотите. Типа ....

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>

Самый быстрый способ запутать браузер, не говоря уже о вас, состоит в наложении меток ...

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>

(Не нужно придумывать способ объяснить это, просто использование примеров все прояснит.)

Еще одна вещь и мы должны завершить этот урок. Браузер имеет заданные по умолчанию параметры настройки для цвета текста, цвета связи, цвета активной связи и цвета посещенной связи. Значения по умолчанию - ...

Текст - черный
Связь - синий
Активная связь - красный
Посещенная связь - фиолетовый

Вы можете изменять их, если Вам необходимо.
Вы можете изменять эти значения по умолчанию для всего документа в метке <BODY>.

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Something really cool
<BODY>

Something really cool
I know that we have not gotten into how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links.
You can see that the background is now black and the text is now yellow.
 Links are now red
 Visited links are now dark red
 And active links are green.

Вы теперь знаете почти все, что необходимо делать с текстом в вашем документе. Вы можете теперь делать Большие красные символы или малые полужирные символы, Вы можете использовать другие Шрифты, или моноширинные шрифты.
Вы можете сделать и так rollercoaster!

Кодирование для roller coaster здесь, если Вы хотите видеть его.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


Frames Tutor- Lesson 2

Фреймы - Урок 2

Метка <FRAMESET> производит все деление. Это - все, что требуется для ... деления окна. Она определяет несколько параметров, как делить окно. Помните, что всякий раз, когда Вам необходимо выполнить некоторое деление - используйте <FRAMESET>.
Можно ли делить окно на более чем 2 части? Да, только удостоверьтесь, что Вы определили страницу для каждой секции, или браузер запутается.

<FRAMESET COLS="20%,20%,20%,20%,20%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="shannon.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Довольно очевидно, что мы можем делать фреймы такими, чтобы все они были различных размеров. Только удостоверитесь, что ваша арифметика правильна или браузер придумает собственную интерпретацию.

<FRAMESET COLS="10%,20%,30%,15%,25%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="shannon.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Если мы определим деление в СТРОКАХ - ROWS вместо СТОЛБЦОВ - COLS мы получил нечто совсем другое.

<FRAMESET ROWS="10%,20%,30%,15%,25%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="shannon.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Давайте вернемся к делению на 2 равных фрейма - столбца.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Мы можем определить 50 пикселей вместо 50%. И, мы можем использовать * вместо числа. * означает какой-то остаток.

<FRAMESET COLS="50,*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО
Есть важный момент..., давайте предположим, что Вы делаете фреймы 100 пикселей шириной слева и 100 пикселей шириной справа. Так как Вы управляете экраном 800x600, Вы делаете 3-ью среднюю область шириной в 600 пикселей. Наш экран 640x480. Эти реймы шириной в 100 пикселей, которые Вы помещаете на вашу страницу, теперь на нашеи экране 80 пикселей шириной. Если Вы используете некоторые бсолютные размерности в ваших метках <FRAMESET>, ВСЕГДА необходимо иметь, по крайней мере, один * , как упругий фрейм. Таким способом все будет выглядеть хорошо для каждого экрана и фрейма.

Это общая проблема фреймов и мы хотим потратить время, чтобы привлечь дополнительное внимание. к ней. Популярное размещение фреймов - узкое окно каталога слева и большее основное окно справа подобно этому. Но есть проблемма... Если Вы делите окно, используя проценты (типа <FRAMESET COLS="15%,85%">) все будет возможно выглядеть превосходно как у Вас. Но... у кого-то с другой разрешающей способностью экрана вид может быть и таким.

Причина этого в том, что Вы определили левое окно в 15 %. 15 % от чего? 15 % любой горизонтальной экранной разрешающей способности. Это означает что, левое окно может выглядеть немного по разному различным людям. Используйте только абсолютную размерность для левого окна и делайте правое окно гибким (типа <FRAMESET COLS="120,*">).

Это хорошая идея делать абсолютную размерность чуть - чуть больше, чем необходимо. Дайте наполнению в левом окне небольшой участок пространства для существования. Например, если 100 пикселей достаточно для заполнения в «притык» ..., делают окно 120 или 125 пикселей.

Хороший и безболезненный способ проверить ваше размещение при различных экранных разрешающих способностях изящным небольшим MS PowerToy, называемой Quickres.

Мы можем иметь больше чем один остаточный фрейм и определять их связанные между собой размеры.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
</FRAMESET>

ПРСМОТРИТЕ ЭТО
Переведем, что говорит пример выше: Сделать 3 фрейма. Первый сделать шириной в 50 пикселей. Остаток разделить между 2-ым и 3-им фреймами , но 3-ий в двое больше 2-го фрейма. Поместите lisa в первый фрейм, Terri во второй и Kim в третий.

Важно обратить внимание на порядок выполнения. Первый <FRAME> отображается согласно первому атрибуту размера в метке <FRAMESET> (50/lisa), второй со вторым (*/terri) и третий с третьим (2*/kim).

Что, если мы захотим разделить kim пополам горизонтально? Не забудьте, если Вы хотите произвести любое деление, Вы должны использовать метку <FRAMESET>. Сначала мы должны заменить Kim на пару меток <FRAMESET>.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

В этой метке мы сообщили браузеру: Сделать 3 фрейма. Первый шириной в 50 пикселей. Остаток разделить между 2-ым и 3-им фреймами, но сделать 3-ий фрейм в два раз шире, чем 2-ой фрейм. Поместите lisa в первый фрейм , Terri во второй, а третий фрейм мы собираемся делить далее. Теперь мы должны определить, как делить третий фрейм.

Мы собирались делить его пополам горизонтально.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
  </FRAMESET>
</FRAMESET>

И я думаю, что мы поместим Kim в верхнюю часть, а Tina в нижнюю часть.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Давайте разделим Lisa горизонтально на 3 секции. Верхнее окно должно быть 50 пикселей высотой. Другие два могут быть равными по высоте. Мы поместим Lisa во все три. Все изменения в одном большом куске.

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>

ПРОСМОТРИТЕ ЭТО
Фактически, если страница была разделена на много частей, то она будет выглядеть довольно алляписто. Хорошее правило - не иметь больше чем 3 фрейма на странице. Если Вы можете избежать и это число, это даже лучше.

Самое время подумать о людях, которые используют браузеры, не поддерживающие фреймы. Хотя большинство ваших посетителей смогут видеть фреймы, есть несчастная малая часть, которая пытается просматривать web страницы устаревшими браузерами. Если Вы хотите помочь этим людям, Вы можете написать не-фреймовую версию вашей главной страницы и добавить ее ...

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Поместите вашу не-фреймовую страницу здесь ниже.
Если кто-то использует старый браузер,
он пропустит все выше и перейдет прямо сюда.
Браузеры поддерживающие фреймы игнорируют то,
что появляется между метками <NOFRAMES>.

</BODY>
</NOFRAMES>

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


Table Tutor- Lesson 2

Таблицы - Урок 2

Ok, вот что мы получили...

<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

...и оно дает нам :

Ed

Вначале, чтобы это выглядело как таблица, дайте ей рамку. Каждый раз, когда Вы делаете изменения и хотите видеть, как они выглядит, Вы можете нажимать кнопку Reload на вашем браузере. Если ваш браузер не имеет кнопки перезагрузки, получите другой браузер.

<TABLE BORDER=1>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Как насчет большей рамки?

<TABLE BORDER=5>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Как насчет ОГРОМНОЙ рамки?

<TABLE BORDER=25>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

А как без рамки?

<TABLE BORDER=0>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Вы могли видеть, значение по умолчанию без рамки.

Давайте остановимся пока на скромной рамке.

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Когда размеры не определены, таблица столь велика, как требуется.

<TABLE BORDER=3>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Определение размера таблицы довольно просто хотя.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Как относительно этого?

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Давайте избавимся пока от друзей Ed.

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Давайте уменьшим размер таблицы до 50 % окна браузера.

<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Теперь определим ширину 50 вместо 50 %.

<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Теперь 100.

<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Как Вы можете видеть, имеются два способа определения ширины таблицы. Какой стиль использовать для этого сейчас не существенно.

Мы можем также определять высоту.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Мы можем управлять, где должны появиться данные в ячейке.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Ed</TD>
</TR>
</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Ed</TD>
</TR>
</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Ed</TD>
</TR>
</TABLE>

Ed

Как Вы можете видеть, значение по умолчанию - ALIGN=LEFT.

Мы можем также управлять и вертикальным расположением данных в ячейке..

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Ed</TD>
</TR>
</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD>
</TR>
</TABLE>

Ed

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD>
</TR>
</TABLE>

Ed

Значение по умолчанию - середина.

Изображения также можно размещать в ячейке данных таблицы и можно управлять их размещением. В папке, которая содержит этот документ, Вы найдете малое изображение с именем ed.gif. Скопируйте его в рабочую папку (в ту, куда Вы поместили tables1.html). Вставьте метку IMG для Ed.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>

Я полагаю, что теперь самое время, подчеркнуть, что хорошая практика включить размерные атрибуты со всеми метками изображения. Я не буду говорить о деталях, но выполнение этого правила упрощает загрузку для браузера и позволяет избегать некоторые неожиданности.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !


Form Tutor- Lesson 3

Формы - Урок 3

Прежде, чем продолжить, есть еще один аспект, который мы хотим упомянуть. Вы можете использовать изображения в форме. Фактически, Вы можете использовать что - то в форме или форму в чем - нибудь. Только соблюдайте html синтаксис и избегайте наложения меток.

Вопросник по Президентам США
RepDem | RepDem | RepDem | RepDem | RepDem | RepDem
RepDem | RepDem | RepDem | RepDem | RepDem | RepDem

html для этой формы [image] находится [image] здесь , если Вас интересует.
...а ответы здесь , если они вам необходимы.

Иллюстрация перекрытия меток

   <TABLE><FORM></TABLE></FORM> Перекрытие меток....плохо
   <TABLE><FORM></FORM></TABLE> Вложенные метки.... хорошо

Следующий тип ввода - Pull Down List - Падающий список. С этим типом Вы используете <SELECT> вместо <INPUT> и есть и заключительная метка. Давайте запишем это.

<SELECT>
</SELECT>

Не забудьте дать имя.

<SELECT NAME="BEST FRIEND">
</SELECT>

Затем добавьте несколько опций - option.

<SELECT NAME="BEST FRIEND">
<OPTION>Ed
<OPTION>Rick
<OPTION>Tom
<OPTION>Guido
</SELECT>

И дайте каждой <OPTION> значения VALUE.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
</SELECT>

Заданная по умолчанию опция - та, которая перечислена первой.

Мы можем определить значение по умолчанию отличное от первой опции в списке.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom" SELECTED>Tom
<OPTION VALUE="Guido">Guido
</SELECT>

Scrolling List - список с прокруткой очень похожая конструкции наPull Down List . Давайте добавим еще несколько имен.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</SELECT>

Все, что мы должны сделать - добавить атрибут SIZE в метку <SELECT>.

<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</SELECT>

SIZE - просто указывает, сколько параметров показываются в окне.

Снова, значение по умолчанию - первая <OPTION>, и снова мы можем изменять его, выбирая другой.

<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom" SELECTED>Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</SELECT>

I have no idea why you would use the selection feature for a Scrolling List but it's there and I just felt the need to tell you about it.

Очень полезный тип ввода <TEXTAREA>.

<TEXTAREA NAME="COMMENTS">
</TEXTAREA>

Вы управляете размером блока подобно этому ...

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>

ROWS - высота, COLS - ширина.

Html код для этой текстовой области здесь.

Хороший атрибут для включения в <TEXTAREA> - WRAP. Некоторые браузеры не понимают этот атрибут, но если он есть, они только игнорируют его.

Наберите ...

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>

WRAP=VIRTUAL способ, которым текст в блоке оборачивается, но он посылается как одна длинная непрерывная строка.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>

WRAP=PHYSICAL способ, который текст в блоке оборачивается, и он послан тем же способом.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>

Это - значение по умолчанию.
WRAP=OFF способ, который текст в блоке не обертывает, но он посылается точно способом, которым он набирался (подобно небольшому человеку в примере выше)..

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Итак, Вы хотите построить Web Страницу !


So, you want to make a Web Page!- Lesson 3

Итак, Вы хотите построить Web Страницу!
Урок 3

Начнем изучение способов работы браузера.
Сначала примеры ... ...

<BODY BGCOLOR="#FFFFFF">
Something really cool
like an icecube!
<BODY>

Something really cool like an icecube!

<BODY BGCOLOR="#FFFFFF">
Hey!
What's
going
on
here??
<BODY>

Hey! What's going on here??

Браузер не распознает форматирование. Если Вы не сообщаете ему иначе, он только отображает символы в устойчивом потоке. Если Вы хотите начать новую строку, Вы должны использовать прерывание строки.

<BODY BGCOLOR="#FFFFFF">
Hey!<BR>
What's<BR>
going<BR>
on<BR>
here??
<BODY>

Hey!
What's
going
on
here??

Метка <BR> просто говорит начни новую строку. Метка <BR> подобна <P>. Она делает точно то же самое, но она разрывает строку.

<BODY BGCOLOR="#FFFFFF">
Hey!<P>
What's<P>
going<P>
on<P>
here??
<BODY>

Hey!

What's

going

on

here??

Это примеры автономных меток. Не требуется конечная метка. Вы не можете использовать их больше чем одну раз подряд. Другими словами, определение <P><P><P> не даст Вам 3 пустых строки, а даст Вам только одну. Как можно добавить несколько пустых строк? Мы сообщим Вам через минуту.

Просмотрите это во первых...

<BODY BGCOLOR="#FFFFFF">
Something        really        cool
<BODY>

Something really cool

Браузер не распознает больше чем 1 пробел. Сначала это могло бы все казаться довольно глупым, чтобы быть способом, но действительно, лучше иметь такой способ. Это дает Вам абсолютный контроль над видом документа.

Имеется изящный небольшой код, который означает для браузера «пробел» -> &nbsp;

Испытайте его...

<BODY BGCOLOR="#FFFFFF">
Something&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
really&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
cool
<BODY>

Something really cool

Символ & означает, что мы начинаем специальный символ, ; означает конец специального символа и литеры между ними составляют абревиатуру предназначения. Имеются шесть таких специальных символов. (Обратите внимание: они должны быть всегда строчными буквами)

  • &nbsp; ( неразрывающийся пробел)
  • &lt; (< символ меньше чем)
  • &gt; (> символ больше чем)
  • &amp; (& амперсанд)
  • &quot; (" маркер кавычек)
  • &shy; ( мягкий дефис)

Вы не должны использовать их все время, только когда набор реального символа может запутать браузер. Как узнать, когда это необходимо делать? Нет твердого и быстрого 'правила'. Это придет только с практикой и повторениями.

Между прочим, несколько мыслей об ошибках и повторах. Есть люди, которые считают, что ошибки это плохо. Они боятся пробовать что - нибудь новое из за опасения неприятностей. Повторение одной и той же ошибки может немного расстроить, но во время обучения они полезны. Ошибки - наши друзья.

Есть другие специальные символы . Едва ли Вы будете когда-либо использовать их, но Вы должны их знать.

Браузер будет отображать ваш текст в устойчивом потоке, если Вы не сообщите ему другое о прерываниях строки и т.д. Он уменьшит любые пустые области до 1 пробела. Если Вы хотите большее количество пробелов, Вы должны использовать код пробела (&nbsp;). Если Вы нажимаете Return (или Enter) во время набора, браузер интерпретирует это как пробел ..., если там уже нет пробела.

Еще один быстрый пример.

<BODY BGCOLOR="#FFFFFF">
Something<BR>really<BR>cool<BR>
like<BR>an<BR>icecube!
<BODY>

Something
really
cool
like
an
icecube!

Довольно чисто?

Затем очень полезная небольшая метка. Она сама довольно хорошо объясняет.

<BODY BGCOLOR="#FFFFFF">
<CENTER>Something really cool</CENTER>
<BODY>

Something really cool

Вы можете центрировать одно слово или страницу полностью. Все что расположено между метками <CENTER> центрируется.

Как сделать многократные пустые строки? Это действительно просто. Делайте прерывание строки для каждой пустой строки.

<BODY BGCOLOR="#FFFFFF">
Something really<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
cool
<BODY>

Something really

cool

Давайте введем изображение в web страницу. Мы собираемся использовать рисунок приведенный ниже. Еще раз, щелкните правой кнопкой мыши, чтобы сохранить его с этой страницы или копировать его из папки pics..

Вы определяете изображение меткой <IMG> (image).

<BODY BGCOLOR="#FFFFFF">
<IMG>
<BODY>

Мы должны также определить источник и размер.

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68>
<BODY>

Позвольте заметить, источник определяет не только какое изображение, но и где хранится это изображение.Вышеупомянутый источник "copper.gif" означает, что браузер будет искать изображение с именем copper.gif в той же самой папке (или каталоге), где непосредственно расположен html документ. Ниже - несколько диаграмм..

 SRC="copper.gif" означает, что изображение находится в той же самой папке, где и html документ, запрашивающий его..

SRC="images/copper.gif" означает, что изображение из папки нижнего уровня, по сравнению с папкой html документа, который запросил его. Это можно продолжить по уровням вниз настолько это необходимо.

SRC="../copper.gif" означает, что изображение находится в папке верхнего уровня, по сравнению с папкой html документа, который запросил его..

SRC="../../copper.gif" означает, что изображение в папке на два уровня выше, чем папка html документа, который запросил его.

SRC="../images/copper.gif" означает, что изображение и html документ в папках одного уровня..

SRC="../../../other/images/copper.gif" Надеемся, что Вы разберетесь со всеми путями.

Имеется другой способ, которым это может быть выполнено. Все ссылки к изображениям могут иметь их полный URL. Например: http://www.hair.net/~squiggie/LottzaStuff/other/images/copper.gif

Вы просите, почему использование относительного URL имеет намного больше смысла, чем абсолютного (полного) URL? Потому что Вы можете формировать ваш узел локально и все связи будут работать. Когда ваши страницы завершены, Вы передаете целый набор на ваш сервер и все прекрасно будет работать. Кроме того, это проще для браузера, чтобы получить изображения, и ваша страница загрузится быстрее. Имеется ли какая-либо причина использовать абсолютный URL? Несомненно, если изображение постоянно сохраняется на другом сервере.

Кое-что Вы должны знать об изображениях и их размерах.

Испытайте это...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif">
<BODY>

Как Вы можете видеть, браузер выясняет насколько большое изображение сам. Почему тогда нужно беспокоиться о размерах? Без вхождения в детали, это заставляет вашу страницу загружаться быстрее, потому что это проще для браузера..

Отметьте размеры снаружи...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=200 HEIGHT=68>
<BODY>

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=20 HEIGHT=100>
<BODY>

Вы можете определять любые размеры, которые Вы хотите и отменять соответствующие размеры. Рассмотрите эту небольшую красную точку -> <-. Это квадрат 2x2. Посмотрите, что можно сделать с ней ...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5>
<CENTER><IMG SRC="red_dot.gif"
WIDTH=2 HEIGHT=200></CENTER>
<BODY>

Здорово?

<--ОБРАТНО  ДАЛЕЕ-->

Введение Урок
1 		Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


A Presidential Quiz
Rep Dem | Rep Dem | Rep Dem | Rep Dem | Rep Dem | Rep Dem
Rep Dem | Rep Dem | Rep Dem | Rep Dem | Rep Dem | Rep Dem


Frames Tutor- Lesson 3

Фреймы - Урок 3

Давайте вернемся к простому примеру...

<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Мы можем помещать изображения во фреймы. В папке с именем 'examples' есть рисунок названный world.gif. Найдите его и скопируйте в вашу рабочую папку.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО
Не забудьте, включать атрибуты HEIGHT и WIDTH для каждой метки рисунка.

Давайте попытаемся поместить во фрейм хорошее и опрятное изображение . Сначала уменьшите левое окно до 146 пикселей в ширину. Так как мы используем абсолютные размеры, то должны делать другой фрейма эластичным.

<FRAMESET COLS="146,*">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Затем мы разделим левый фрейм горизонтально на 2 секции. Верхняя секция должна быть высотой в 162 пикселя, а остальное для нижней части. Мы поместим world.gif и Lisa соответственно.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО
Как можете видеть, мы имеем часть проблемы.

Линейки прокрутки, которые Вы видите, могут быть определены как YES, NO или AUTO. YES означает означает окно всегда имеет линейки прокрутки, независимо необходимы они или нет. NO означает, что не будет никаких линеек прокрутки, даже если ваше содержание фрейма столь же велико, как и New Jersey... - значение по умолчанию. AUTO - если линейки прокрутки необходимы, они появляются, если необходимости нет, то нет и линеек прокрутки. Давайте избавляться от наших линеек прокрутки.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Мы все еще имеем проблему. Изображение не правильно расположено во фрейме. Следующие два атрибута имеют дело с полями. Браузер автоматически дает каждому фрейму некоторый вакуум вокруг содержания. Это обычно необходимо для asthetics. Вы можете управлять размером этих полей, используя MARGINWIDTH и MARGINHEIGHT. Они управляют левым, правым и верхним, нижним полями соответственно. Мы установим их оба в 1. (1 - минимум)

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

К сожалению это все еще не решает поставленную задачу. Размерности фрейма измеряются от центра до центра.

Минимальная рамка 1. Так как заданный по умолчанию размер рамки - 6 пикселей, мы должны добавить 8 к каждому размеру изображения (половина от 6, плюс 1 и 2 раза). Если это путает, только добавьте 8 к каждой размерности изображения, чтобы получить ваш размер окна.

<FRAMESET COLS="154,*">
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО
Это отобразит ваше изображение точно в окне, или по крайней мере довольно близко. Вы когда-либо видели изображение во фрейме, который был урезан по одной или более сторон? Если Вы используете абсолютные размерности, наряду с упругим фреймом. И если Вы добавите 8 к размеру изображения, чтобы получить размеры фрейма, ваше изображение будет выглядеть прекрасно.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


Table Tutor- Lesson 3

Таблицы - Урок 3

Давайте вернемся к простому старому Ed.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD>
</TR>
</TABLE>

Ed

И для ясности и простоты давайте удалим атрибуты выравнивания. Мы знаем, что случится, потому что мы знаем значения по умолчанию. Между прочим, МЕТКА сообщает браузеру что выполнить. АТРИБУТ следует внутри МЕТКИ и сообщает браузер как сделать это.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Теперь мы сделаем нашу таблицу больше.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Друг Ed а Tom хочет себе собственную ячейку.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
</TR>
</TABLE>

Ed Tom

Когда браузеру не даны команды, каждая ячейка может (но не всегда) быть отличной по размеру. Прекрасная идея всегда определять размер каждой ячейки. Удостоверитесь, что ваша арифметика правильна или люди будут видеть не то, что Вы хотите!

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Ed</TD>
<TD WIDTH=150>Tom</TD>
</TR>
</TABLE>

Ed Tom

Эти атрибуты WIDTH могут также быть выражены в процентах.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=50%>Ed</TD>
<TD WIDTH=50%>Tom</TD>
</TR>
</TABLE>

Ed Tom

Дадим Ed большую ячейку, так как он был здесь с самого начала.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=80%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
</TR>
</TABLE>

Ed Tom

Теперь Rick. Мы должны решить, сколько строк мы выделим ему, полагаю, что 20 % - нормально. Удостоверитесь, что скорректировали Ed также.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
</TABLE>

Ed Tom Rick

Добавим еще три ячейки.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

Атрибуты WIDTH первой строки переносят на вторую строку.

Если Mo убрать, мы все еще будем иметь абсолютно хорошую таблицу, но только с пустой ячейкой.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly

Давайте поместим Mo обратно и удалим все атрибуты за исключением BORDER.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

Затем - пара атрибутов с именами CELLPADDING и CELLSPACING. Оба используются в метке <TABLE>. CELLPADDING - количество пустого пространства между рамкой ячейки и содержанием ячейки.

<TABLE BORDER=3 CELLPADDING=12>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

По умолчанию значение для этого атрибута 1.

Если мы подставляем CELLSPACING вместо CELLPADDING мы получаем несколько отличный эффект.

<TABLE BORDER=3 CELLSPACING=12>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

Значение по умолчанию для атрибута CELLSPACING - 2..

Мы, конечно, можем использовать эти атрибуты в комбинации.

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !


<TEXTAREA NAME="COMMENTS" ROWS=15 COLS=65>

                            \\|//
                            (@ @)
 ----------------------oOO---(_)---OOo-------------------------
 :                                                            :
 :  This is to illustrate that if you type something between  :
 :  the TEXTAREA tags, it will show up in the window as the   :
 :  default "COMMENT". The cool part is... it shows up        :
 :       EXACTLY  the         type                            :
 :                    way you      it!                        :
 :        (unless you're using MS Internet Explorer)          :
 --------------------------------------------------------------
                           |__|__|
                            || ||
                           ooO Ooo
</TEXTAREA>


Form Tutor- Lesson 4

Формы - Урок 4

Другой тип ввода HIDDEN - скрытый ввод.

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form 1">

HIDDEN ввод - пара имя/значение, которая возвращается Вам, но не показывается где-нибудь на web странице. Скрытый ввод необходим для использования с Mailto Formatter. Как MTF распознает формы, предполагаемые для анализа.

Давайте предположим, что Ваша компания пробует определить лидерство нового продукта. Вы имеете стандартную форму для сбора информации ... имя, компания, телефон, интересующие продукты и т.д. Единственная проблема - имеются 6 немного различных версий формы в 6 различных местах. Вы должны знать, что откуда исходит. Что делать?

Вы могли бы добавить HIDDEN ввод в ваши формы подобно этому...

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> ...для первой версии
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> ...для второй версии
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> ...для третьей версии
И так далее ...

<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...... Вы получили бы обратно E=Mc^2

С крытые вводы полезны для cgi сценариев. Например, много провайдеров услуг Internet имеют сценарий, по которому Вы можете иметь формы для рассылки. Он затем возвращает формы обратно к Вам в удобном и готовом виде для человеческого употребления. Скрытый ввод сообщает cgi сценарию, кто Вы, куда послать анализируемые данные и т.д.

Последнее - кнопки SUBMIT и RESET.

Это действительно очень просто ...

<INPUT TYPE=SUBMIT>

SUBMIT конечно, посылает данные ......

...а RESET очищает форму.

<INPUT TYPE=RESET>

Мы можем легко изменять то, что кнопки говорят.

<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>

В случае необходимости, кнопка SUBMIT может также иметь NAME. Вам это необходимо, если Вы имеете больше чем одну кнопку SUBMIT.

Еще одно и мы собирается завершать это. Когда Вы помещаете форму mailto на вашу страницу и кто - то посылает Вам информацию, вы обратите внимание, что оно послано с заданным по умолчанию Предметом - Subject. . Если вы - посетитель, использующий Netscape, вы получите заданный по умолчанию "Form posted from Mozilla". Другие браузеры могут послать "Form Response" и т.д.

Вы можете изменить это, редактируя то, что находится в метке <FORM> следующим образом ...

<FORM METHOD=POST ACTION="mailto:michael@corleone.com?subject=Our friends in Las Vegas" ENCTYPE="application/x-www-form-urlencoded">

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Итак, Вы хотите построить Web Страницу !


So, you want to make a Web Page!- Lesson 4

Итак, Вы хотите построить Web Страницу!
Урок 4

Давайте изучим связи.

Это действительно очень просто. Мы построим связь с Yahoo.
Начните с этого...

<BODY BGCOLOR="#FFFFFF">
Go to Yahoo!
<BODY>

Go to Yahoo!

Затем добавьте пару меток анкеров.

<BODY BGCOLOR="#FFFFFF">
Go to <A>Yahoo!</A>
<BODY>

Go to Yahoo!

Добавьте URL и связь построена! (URL - Universal Resource Locator - Универсальный Локатор Ресурсов). По существу это только адрес.

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
<BODY>

Go to Yahoo!

Давайте сделаем еще одну связь.

<BODY BGCOLOR="#FFFFFF">
Go to Netscape!
<BODY>

Go to Netscape!

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/">Netscape!</A>
<BODY>

Go to Netscape!

Связь электронной почты создается таким же способом. Мы только используем адрес электронной почты вместо адреса страницы.

<BODY BGCOLOR="#FFFFFF">
Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A>
<BODY>

Send me Mail!

Мы можем сделать изображение связью, если хотим. Используя пример выше 'Go to Netscape!' мы просто подставим метку <IMG> вместо слова Netscape!

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"><IMG
SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
<BODY>

Go to

Часто спрашивают, как избавиться от раздражающей синей рамки вокруг изображения, когда Вы устанавливаете эту связь? Просто ...

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif"
WIDTH=82 HEIGHT=68 BORDER=0></A>
<BODY>

Go to

Когда Вы включаете изображения в вашу страницу, не забудьте, что они содержат достаточно много данных и следовательно могут не спешить загружаться. Один способ уменьшать размер (под размером мы понимаем Кб) состоит в том, чтобы уменьшить размерности. Урезание длины и ширины на половину дает результат 1/4 размера изображения в Кб. Также Вы можете уменьшать число цветов. Например:

Размерность 272 x 394
# цветов - 229
Размер- 21.5 Kб 		Размерность 144 x 269
# цветов - 15
Размер - 4.7 Kб

Все редактирование изображения было выполнено Paint Shop Pro.

Первое изображение качественнее, но нужно подумать прежде чем использовать его. Если ваша страница постоянно требует его при загрузке, то ваши посетители возможно покинут ее (из за времени ожидания) и они не увидят ничего.

Gif Wizard - очень полезный инструмент от Raspberry Hill Publishing, который поможет Вам уменьшить размер ваших изображений. Просто наберите в URL (адрес) изображения, которое Вы хотите уменьшить, и ваш фоновый цвет (не обязательно), и Вы получите обратно несколько версий вашего изображения с различными степенями "сжатия".

Ваш цвет фона (не обязательный): Красный Зеленый Синий
Другая опция, которая может быть использована, если Вы хотите предложить alot изображений, должна обеспечить эскизы, с которыми связаны больше размерные версии изображений. Мы хотим предложить три очень хороших изображения автомобилей.

Щелкните на эскизе, чтобы увидеть увеличенное изображение

Первое дело, которое Вы должны выполнить - вызвать ваш редактор изображений и сделать меньшие версии ваших изображений. Это также помогло бы уменьшить цветную глубину. Пункт создания меньшей версии очень важен. Многие пытаются сделать эскиз, простым уменьшением размерности в метке <IMG>. Они все равно загружают полное изображение в меньшее пространство. Что Вам необходимо сделать - создать меньшую копию изображения и использовать ее как связь с большим изображением.

Эскизы просто изготовить.
В Photoshop откройте ваше полноразмерное изображение.
Выберите Image Size... в меню Image:
Убедитесь, что переключатель File Size выключен.
Примечание: Можно работать в пикселях или в дюймах. Выбрать единицы можно в всплывающем меню.
В поле Width наберите новую ширину.
Если Вы делаете отдельные эскизы из различных файлов, делайте их одинаковыми по ширине и/или высоте. Это упростит просмотр ваших эскизов.
В PhotoPaint в меню Image Menu выберите Resample... Проделайте то же самое, что Вы делали в Photoshop.
Когда выберите размер, сохраните ваш эскиз как JPEG с LOW качеством/HIGH сжатием. Например, можно из исходного изображения размером 38K изготовить эскиз менее 2K.

Давайте сделаем это. Мы используем Corvette (он синий). Поместите полноразмерное изображение и малое изображение в вашу рабочую папку. Еще раз, пользователи Netscape щелкают правой кнопкой мыши и save as.

Начните с вашей метки <IMG> .

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
<BODY>

Добавьте ваши метки <A> .

<BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car1a.gif"
WIDTH=87 HEIGHT=60><A>
<BODY>

Добавьте URL и связь создана!

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG
SRC="car1a.gif" WIDTH=87 HEIGHT=60><A>
<BODY>

Вы можете, если Вы хотите, избавиться от синей рамки. Хотя, Вы можете и сохранить ее, чтобы ваши читатели знали, что это - связь.

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87
HEIGHT=60 BORDER=0><A>
<BODY>

Другой способ связывания состоит в том, чтобы связываться не только со страницей, но и с определенной частью страницы. Щелкните здесь , чтобы волшебно перенестись к тому месту, где мы сначала говорили об URL. Поскольку это будет использоваться интенсивно, хорошо бы Вам построить пример, лучшее, что я смогу сделать - это обьяснить как это сделать.

Во первых начните с места (ячейки), куда люди будут переноситься по Вашему желанию. Выберите слово и заключите его в меткиe <A> .

<A>Добавьте</A> URL и Вы выполнили!

Затем дайте имя анкера - места (ячейки) атрибутом NAME.

<A NAME="upabit">Добавьте</A> URL и Вы выполнили!

Вы маркировали место (ячейку). Теперь оно может быть вызвано.

Теперь начните формировать связь.

Щелкните <A>здесь</A> , чтобы волшебно перенестись...

Добавьте документ, который будет вызван ...

Щелкните <A HREF="lesson04.html">здесь</A> , чтобы волшебно перенестись...

И наконец, добавьте имя анкера подобно этому ...

Щелкните <A HREF="lesson04.html#upabit">здесь</A> , чтобы волшебно перенестись...

И это - все, что требуется для построения такой связи! Это точно не хирургия мозга.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


Frames Tutor- Lesson 4

Фреймы - Урок 4

Теперь мы опробуем пару малых эффектов. Хотя они работают не со всеми браузерами. Если браузер не понимает атрибут, он только игнорирует его.

Во первых мы можем изменять толщину рамок...

<FRAMESET COLS="154,*" BORDER=20>
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Мы можем изменять цвет рамок.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Мы можем выключить рамки для индивидуального <FRAMESET> с FRAMEBORDER.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
<FRAMESET ROWS="170,*" FRAMEBORDER=NO
>
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="lisa.html">
</FRAMESET>
<FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Мы можем предотвращать изменения размеров фрейма при просмотре. Если нет специальных обстоятельств, действительно нет никаких причин использовать этот атрибут.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
  <FRAMESET ROWS="170,*" FRAMEBORDER=NO >
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html" NORESIZE>
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Хорошо. Теперь, когда мы научились немного кадрировать фреймы [image], давайте вернемся к простым вещам и мы будем рвать (tear) связи между фреймами.

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Добавим связь из beth.html с shannon.html. Вначале откройте beth.html в Notepad и добавьте следующее...

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend Shannon
</BODY>
</HTML>

Затем добавьте связь и сохраните это.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html">Shannon</A>
</BODY>
</HTML>

Теперь испытайте это.

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html">
</FRAMESET>

ПРОСМОТРИТЕ ЭТО

Если Вы щелкните на этой связи, то увидите загрузку страницы Shannon в окно Beth. Мы понимаем, что не удивили Вас. Вы хотите щелкнуть на связи в окне Beth и загрузить это в окно Terri. Хорошо, но это потребует немного больше работы.

В вашей главной странице добавьте имя второму фрейму.

<FRAMESET COLS="33%,67%">
  <FRAME SRC="beth.html">
  <FRAME SRC="terri.html" NAME="WINDOW-1">
</FRAMESET>

Позвольте сделать комментарий. Этот второй фрейм не реально "Terri". Это просто второй фрейм и мы определили, что terri.html - первый файл, который будет загружен в него. Если бы мы имели пустую метку <FRAME>, окно было бы ... пустым.

Обратите внимание, что - имена в <FRAME> NAME должны начинаться с алфавитно-цифрового символа. Все другие имена окон будут игнорироваться. (Исключительная ситуация, когда имя фрейм начинается с символа подчеркивания _ , назначение таких имен объясняется немного позже.)

Затем мы должны добавить кое-что к той связи в странице Beth, откройте beth.html снова (в Notepad) и добавьте TARGET.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A>
</BODY>
</HTML>

Это заставит связь загружать в окно с именем WINDOW-1.

ПРОСМОТРИТЕ ЭТО

Такой вид связывания применяется, когда Вы хотите связать страницы на вашем узле. Но что делать, если Вы хотите установить связь с кое-чем вне вашего узла? Давайте добавим другую связь в страницу Beth.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A><P>
And of course you have to visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="WINDOW-1">Professional Web Design</A><P>
</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО
Как Вы можете видеть, это вынуждает какую-то внешнюю страницу загружаться в ваше окно

Как можно сделать, чтобы внешняя связь загружала в полное окно браузера? Просто, измените значение TARGET на _top.

<HTML>
<HEAD>
<TITLE>My Framz Page</TITLE>
</HEAD>
<BODY>
Beth<P>
You have to visit my friend <A HREF="shannon.html" TARGET="WINDOW-1">Shannon</A><P>
And of course you have to visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="_top">Professional Web Design</A><P>
</BODY>
</HTML>

ПРОСМОТРИТЕ ЭТО
Используйте всегда этот метод для внешних связей страницы. Поверьте, ваши читатели оценят это!

_top is - один из 4 так называемых 'волшебных адресатов'. Это _self, _blank, _parent и _top. - только эти адресаты могут начинать не с алфавитно-цифрового символа. Кроме того, любой другой адресат, начинающийся с символа _, кроме 'волшебных адресатов', будет игнорироваться.

Замечание- Важно определять TARGET="_top" ,а не TARGET="_TOP". Обычно HTML не чувствителен к регистру, но не в этом случае. Использование _TOP вместо _top будет иногда заставлять связь открываться в новом браузере, а не в полном окне существующего браузера. Упомянутый TARGET="_blank" загружает связь в новое окно браузера.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


Table Tutor- Lesson 4

Таблицы - Урок 4

Давайте избавимся от CELLPADDING и CELLSPACING и возвратимся к нашей простой небольшой таблице.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

Новое свойство браузеров - способность определять цветные фоны для ячеек, строки или целой таблицы. Вы используете BGCOLOR точно так же как в метке <BODY>.

<TABLE BORDER=3 BGCOLOR="#FFCC66">

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

<TABLE BORDER=3>

<TR BGCOLOR="#FF9999">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR BGCOLOR="#99CCCC">
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

<TABLE BORDER=3>

<TR BGCOLOR="#FFCCFF">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD BGCOLOR="#FF0000">Larry</TD>
<TD>Curly</TD>
<TD BGCOLOR="#3366FF">Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

Есть удобная таблица для выбора цветного фона.

Еще одно о цветных фонах таблицы ... <TD> bgcolor отменяет <TR> bgcolor, а <TR> bgcolor отменяет <TABLE> bgcolor. Например:

<TABLE BORDER=3 BGCOLOR="#FF6633">

<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

Позвольте минуту для пояснений. Браузер должен интерпретировать команды, которые Вы даете ему, самым лучшим возможным способом. Если что-то не было определено так или иначе, большинство браузеров пробует найти привлекательное решение. Самое лучшее, что Вы можете сделать как автор, Вы должны определить столько, сколько можете, особенно те параметры, которые определяют желаемый вид вашей страницы. Также важно просмотреть вашу работу браузерами, которыми фактически пользуются ваши читатели. Так как большинство людей использует Netscape, хорошо начать с него. Вы можете также иметь копии пары других популярных браузеров, чтобы убедиться, что Ваша страница и в них выглядит правильно.

Другой аспект просмотра - разрешающая способность экрана. Кто-то работает на экране 640x480, а кто-то использует 800x600, некоторые имеют и 1024x768. Это простое различие может привести к серьезным проблемам с вашим проектом страницы. Есть небольшая утилита называемая QuickRes , которая может изменять разрешающую способность вашего экрана щелчком кнопки. Это не плохая идея просмотреть ваши страницы с различными разрешающими способностями.

Теперь мы поиграем с COLSPAN (Диапазон Столбца) и ROWSPAN (Диапазон Строки). Давайте уберем Tom из таблицы.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Rick
Larry | Curly | Mo

Это только оставило пустое пятно, а Rick сдвинулся и заполнил пустоту.

Если мы хотим, чтобы Ed действительно занял ячейку Тома и сделал ее частью своей области, мы должны использовать атрибут COLSPAN для этого.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed |  | Rick
Larry | Curly | Mo

Чтобы подчеркнуть, что браузер пробует найти привлекательное решение, давайте заставим Ed захватить два столбца, но мы поместим Tom обратно. Мы преднамеренно делаем это только, чтобы увидеть, как браузер обрабатывает это.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed |  | Tom | Rick
Larry | Curly | Mo

Хорошо... давайте уберем Тома снова.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed |  | Rick
Larry | Curly | Mo

Уберем Rick и разместим Ed в центре ячейки.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>Ed</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo

Все другое кодирование html, между прочим может быть использовано в ячейке. Мы будем делать Ed <STRONG> как в примере.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>Ed</STRONG></TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo

Сделаем связь с какой - либо местной страницей.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://www.bsu.bashnet.ru/">Ed</A></TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo

Теперь избавьтесь от всего этого наполнения, возвратите Tom и Rick и займемся <ROWSPAN>.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
Larry | Curly | Mo

Поскольку Вы, возможно, предположили, что <ROWSPAN> - точно как <COLSPAN>, только строки вместо столбцов. Если мы удалим Larry и позволим Ed занять его ячейку, то в результате...

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom | Rick
 | Curly | Mo

И конечно, эти метки могут также использоваться в комбинации.

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Ed</TD>
<TD COLSPAN=2>Tom</TD>
</TR>

<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed | Tom
 | Curly | Mo

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !


Form Tutor- Lesson 5

*** УКАЗАТЕЛЬ для ВВОДА ФОРМ ***

Text
 Password

Radio Buttons

        Good
        Better
        Best
        Super Dooper

Check Boxes

       Gone With the Wind
       Dr Zhivago
       Ben Hur
       Tommy Boy
Textarea
Pull Down List
 Scrolling List
Hidden
 Submit & Reset

<--ОБРАТНО  ???-->

Введение Урок1 Урок 2 Урок 3 Урок 4 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Итак, Вы хотите построить Web Страницу !


So, you want to make a Web Page!- Lesson 5

Итак, Вы хотите построить Web Страницу!
Урок 5

Мы рассмотрели манипуляции с текстом и шрифтом, изображения, связи. Это основы, но пока нет цельного отображения.
Самое время сообщить Вам о разрешающей способности экрана. Экран, на котором мы работаем - 640 на 480 пикселей. Многие используют 800x600 и даже 1024x768. Мы уверены, что есть пользователи и других экранов. Необходимо учитывать это, чтобы ваша страница смотрелась и на других экранах. Вот варианты экрана текущего домашней страницы для различных разрешающих способностей.

640x480 | 800x600 | 1024x768

Это очень хорошая идея проверить вашу страницу на других разрешающих способностях. Ваше тщательно скомпонованное размещение может разваливаться при других разрешающих способностях. Имеется удобная небольшая MS Игрушка, называемаяd Quickres , которая позволяет Вам легко включать экранные разрешающие способности.

Теперь мы собираемся рассмотреть пару инструментальных средств форматирования, доступных для Вас. Вначале один - <BLOCKQUOTE>. В основном этот инструмент перемещает ваши поля обеих сторон.

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</BLOCKQUOTE>
<BODY>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Мы уверены, сначала, когда была изобретена метка <BLOCKQUOTE> , она предназначалась для возвышенной цели, типа цитирования глубоких мыслей авторов. Но сейчас она обслуживает более мирскую цель - простое выравнивание..

Другой очень полезный небольшой инструмент - LIST - Список. Есть упорядоченные - ORDERED списки и неупорядоченные UNORDERED списки.

Это упорядоченный список
  1. большой
  2. малый
  3. короткий
  4. длинный
Это неупорядоченный список
  • красный
  • синий
  • старый
  • новый

Сначала, мы сформируем НЕупорядоченный список.

Начните с этого...

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<BODY>

What I want for Christmas

Обратите внимание - технически мы не начинали формировать список. Это - только своего рода заголовок.

Добавьте пару меток неупорядоченного списка.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
</UL>
<BODY>

What I want for Christmas

Добавьте элемент списка.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
</UL>
<BODY>

What I want for Christmas
  • a big red truck

Добавьте еще несколько ...

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</UL>
<BODY>

What I want for Christmas
  • a big red truck
  • a real fast speedboat
  • a drum set
  • a BB gun
  • a Melanie Griffith

Ура! Вы сделали список!

Как делать упорядоченный список? Просто! Замените метку <UL> на <OL>.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<OL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</OL>
<BODY>

What I want for Christmas
  1. a big red truck
  2. a real fast speedboat
  3. a drum set
  4. a BB gun
  5. a Melanie Griffith

Другой тип списка - список определений.

aardvark
Норное, питающееся муравьями Африканское млекопитающее. И, как знает каждый, первое слово в каждом уважающем себя словаре.

Начните с этого...

<BODY BGCOLOR="#FFFFFF">
<DL>
</DL>
<BODY>

Затем добавьте заголовок определения...

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
</DL>
<BODY>

10th Amendment

И элемент определения.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</DL>
<BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

Как завершающий штрих, Мы находим приятным делать заголовок определения полужирным. Этого не требуется, но думаем, что он выглядит таким намного лучше.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>10th Amendment</B>
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</DL>
<BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.

Другой небольшой прием - Горизонтальная Линия - Horizontal Rule.

<BODY BGCOLOR="#FFFFFF">
<HR>
<BODY>

Мы имеем несколько опций доступных для использования...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
<BODY>

Это само собой понятно.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
<BODY>

Мы можем управлять и толщиной...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
<BODY>

И мы можем делать ее сплошной линией.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
<BODY>

Помните, что браузер не понимает форматирование, он только отображает текст в устойчивом потоке? Вид подобный этому ...

<BODY BGCOLOR="#FFFFFF">

                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo

<BODY>

...отобразится так...

\|/ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

Меткой <PRE> (preformat), мы можем положить конец этому и иметь вещи отображенными так, как мы их набираем.

<BODY BGCOLOR="#FFFFFF">
<PRE>

                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo

</PRE>
<BODY>

                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo

* Обратить внимание, что использован моноширинный шрифт.

Последняя метка, которую мы собираемся обсудить - это комментарий.

<BODY BGCOLOR="#FFFFFF">
<!--This is a comment-->
This is not<P>>
A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, <!--Hi Mom!--> notes to yourself, <!--Pick up milk--> or write a helpful message to someone looking at the source of your page.<!--Copy anything off me and you're dead meat!-->
<BODY>

This is not

A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, notes to yourself, or write a helpful message to someone looking at the source of your page.

Чтобы быть абсолютно чистым, комментарий должен начаться с <!-- и заканчиваться -->
Вы можете даже помещать другие метки html в комментарий и они будут игнорироваться. Браузер будет только сохранять игнорирование все, пока это не видит -->

Вы теперь знаете все основные метки, которые вам необходимы для создания web страниц! Есть ли еще метки? Да и много. Но вы имеете приблизительно 70 % вооружения, которое вам необходимо для создания web страниц. После того, как Вы поработаете с этими основными метками некоторое время, Вы захотите просмотреть более продвинутые учебники: Таблицы, Формы и Фреймы. Они дадут Вам другие 27 % того, что Вы должны знать. А где остальные 3 %? Большинство является метками, которые Вы возможно никогда не будете использовать. Или метками, которые дублируют другие метки, то есть выполняют ту же самую функцию. Или метки, которые имеют очень ограниченное и специализированное использование и Вы можете добавить их в ваш арсенал приемов позже.

По нашему мнению самые лучшие редакторы для использования - это небольшие программы типа мастеров. Вы знаете, говорят некоторые, нет необходимости автору страницы знать о прилизывающем HTML. Одна проблема, много страниц, собранные с помощью этих программ и которые мы видели, выглядят так, как будто автор вообще не знал о HTML.

Наиболее опытные авторы используют текстовые редакторы. Эти редакторы вставляют в набор метки простым щелчком. Они делают это так, что Вы не должны вручную набрать коды цвета, LEFT, RIGHT, CENTER или что-то подобное. Вы имеете абсолютный контроль над вашим проектом страницы. Тройка хороших, которые приходят в голову - CMed, HTMLpad и HTML Notepad. Они все имеют общее - то, что Вы должны знать некоторый HTML. Они упростят процесс вашего кодирования. Они не будут пытаются делать это за Вас.

Как только Вы сделали вашу страницу, Вам необходимо передать ее на сервер. Сервер - это компьютер, который выполняет программу сервера, которая раздает документы всем, кто запрашивает их. Если Вы подключены к internet через вашу компанию или университет спросите вашего администратор системы, как получить место на вашем сервере для ваших страниц. Если Вы имеете собственного Провайдера услуг Internet, спросите его, как получить место. Единственный определенный совет, который мы можем дать, - самая лучшая программа для пересылки ваших файлов - это Cute FTP. Эта программа делает пересылку файлов между компьютерами такой же простой, как и перемещение их на вашем собственном компьютере.

Прежде, чем закончить, мы должны поговорить о стиле и содержании web страницы. Но лучше вам посмотреть Top 10 ways to tell if you have a sucky homepage или русскоязычный вариант этой страницы и Do's and Don'ts of web site design или русскоязычный вариант этой страницы. Определенно стоит посмотреть.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.


Frames Tutor- Lesson 5

Фреймы - Урок 5

Будем теперь делать Фреймовую Страницу с самого начала.
Никаких фантазий, только что-то вроде этого.

Во первых мы должны продумать, что мы хотим в конечном результате. Мы полагаем, что хорошим простым проектом был бы заголовок поперек верхней части, окно каталога слева и основное окно справа. Давайте начнем делать Главную Страницу сначала.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>

Создайте новую папку и сохраните это как index.html. Также изображение, которое мы будем использовать для заголовка - "MY FRAMZ PAGE". Оно называется framz1.gif и оно находится в папке framz . Скопируйте его в рабочую папку, которую Вы только что создали.

Раздельте экран горизонтально.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
</FRAMESET>

</HTML>

Примечание: Мы получили 83, добавляя 8 к высоте изображения (75 + 8=83). Также обратите внимание на то, что поскольку мы используем абсолютную размерность, мы включаем упругий фрейм

Затем определите banner.html, чтобы войти в верхний фрейм (мы сделаем этот документ в пару минут). Также вставьте пару меток <FRAMESET> , потому что мы собираемся делить нижнюю часть далее.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО
Вы можете выполнить страницу теперь, но Вы можете получить сообщения об ошибках, потому что она не завершена.

Мы будем делить окно нижней части на две секции. Мы также определим, что левое окно содержит directry.html, а правое окно - home.html. Замечу еще раз, мы не создали эти документы, так что Вы можете все еще получать сообщение об ошибках.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directry.html">
    <FRAME SRC="home.html">
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО

Так как мы будем иметь наш каталог слева, а страницы будут загружаться в правый фрейм, мы должны назвать этот фрейм. Он единственный будет иметь наполнение, загружаемое в него, и мы действительно должны назвать его.

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
  <FRAME SRC="banner.html">
  <FRAMESET COLS="20%,80%">
    <FRAME SRC="directry.html">
    <FRAME SRC="home.html" NAME="MAIN-WINDOW">
  </FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО
Хорошо. Мы выполнили это ... пока.

Позвольте создать banner.html. Начните со следующего и сохраните его.

<HTML>
<HEAD>
<TITLE>Practice Page- Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
</BODY>
</HTML>

Обратите внимание, мы определили цвет фона синим.
ПРОСМОТРИТЕ banner.html ПРОСМОТРИТЕ Master Page

Вставим изображении и отцентрируем его.

<HTML>
<HEAD>
<TITLE>Practice Page- Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
<CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER>
</BODY>
</HTML>

ПРОСМОТРИТЕ banner.html ПРОСМОТРИТЕ Master Page

Напомним, что, если Вы рассматриваете исходники документов - примеров, чтобы помочь себе в создании ваших документов, Вы можете найти несколько вещей, которые не имеют смысла, или они могут противоречить тому, что мы говорим. Все это, потому что они иллюстрируют уроки в несколько этапов и чтобы уроки работали правильно при просмотре. Поэтому не рассматривайте исходники этих страниц, если Вы не хотите запутать себя.

Как Вы можете видеть, мы имеем проблему. Мы имеем линейку прокрутки и не очень хорошо установленное изображение в окне. Откройте вашу Главную Страницу. Выключите линейки прокрутки и избавьтесь от полей..

<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>

<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html" SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAMESET COLS="20%,80%">
<FRAME SRC="directry.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET>

</HTML>

ПРОСМОТРИТЕ ЭТО

Теперь давайте создадим наш Каталог страницы. Начните со следующего и сохраните это как directry.html.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>

ПРОСМОТРИТЕ directry.html ПРОСМОТРИТЕ Master Page

Дайте заголовок и укажите в тексте все связи. Мы добавим информацию связи за минуту.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

Home<P>

Go here<BR>
or there<P>

or visit<BR>
Yahoo<BR>
Netscape

</BODY>
</HTML>

ПРОСМОТРИТЕ directry.html ПРОСМОТРИТЕ Master Page

Теперь добавьте информацию связей.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

<A HREF="home.html">Home</A><P>

<A HREF="here.html">Go here</A><BR>
<A HREF="there.html">or there</A><P>

or visit<BR>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A>

</BODY>
</HTML>

ПРОСМОТРИТЕ directry.html ПРОСМОТРИТЕ Master Page

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


Table Tutor- Lesson 5

Таблицы - Урок 5

Теперь мы собираемся попробовать несколько вещей только для того, чтобы посмотреть, что произойдет. Есть небольшой неупорядоченный список
Компоненты Яблочного Пирога:

  • Яблоки
  • Мука
  • Сахар
  • Корица

Это весь прекрасно и превосходно, но что, если мы хотим поместить это здесь ......

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Потому что мы хотим, чтобы список был рядом с изображением пирога.

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Для этого мы могли бы использовать таблицу.

При изучении или формировании таблицы, всегда удобнее, когда рамки включены.

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Давайте сформируем это за один шаг одновременно. Это действительно довольно просто.

Начните с малого Ed

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Замените Ed на неупорядоченный список.

<TABLE BORDER=3>
<TR>

<TD>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>

</TR>
</TABLE>

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Помните, в отсутствии других команд, таблица будет создана такого размера, чтобы быть достаточной для содержания данных. Так в этом образце действительно нет необходимости в атрибуте размера.

Затем мы развернем таблицу на полную ширину окна браузера.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>

</TR>
</TABLE>

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Теперь мы должны создать вторую ячейку. Мы хотим, чтобы левая ячейка была немного меньшей чем правая.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD WIDTH=40%></TD>

<TD WIDTH=60%>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>

</TR>
</TABLE>

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Теперь можно скопировать изображение пирога - applepie.gif в вашей рабочей папке.
Вставьте изображение в первую ячейку.

<TABLE BORDER=3 WIDTH=100%>
<TR>

<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>

</TR>
</TABLE>

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Выравним изображение пирога вправо и выключим атрибут рамки.

<TABLE BORDER=0 WIDTH=100%>
<TR>

<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>

<TD WIDTH=60%>
Компоненты Яблочного Пирога:
<UL>
<LI>Яблоки
<LI>Мука
<LI>Сахар
<LI>Корица
</UL>
</TD>

</TR>
</TABLE>

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Все!

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Уок 7 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !


Frames Tutor- Lesson 6

Фреймы - Урок 6

Хорошо, давайте создадим home.html, here.html и there.html. Скопируйте следующее в Notepad и сохраните это.

Сохраните следующее как home.html

<HTML>
<HEAD>
<TITLE>A Practice Page- Home</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN=center>You are home.</H1>
Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames!<P>
<CENTER>Enjoy your stay!</CENTER><P>
</BODY>
</HTML>

ПРОСМОТРИТЕ home.html

Сохраните следующее как here.html

<HTML>
<HEAD>
<TITLE>A Practice Page- Here</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN=center>Here</H1>
Welcome to here. Here is where everything happens. Here you'll find more neat stuff than you can shake a stick at. Have you ever seen anyone shake a stick at something?? I never have.
</BODY>
</HTML>

ПРОСМОТРИТЕ here.html

И конечно сохраните следующее как there.html.

<HTML>
<HEAD>
<TITLE>A Practice Page- There</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN=center>This is There</H1>
I would like to make a proposal. We have all seen that little arrow on signs that say "You are here". Wouldn't it be better if there were also another arrow that says "You should be there". It would make things so much easier.
</BODY>
</HTML>

ПРОСМОТРИТЕ there.html

Теперь просмотрим вашу Главную Страницу.

Мы кое-что забыли. Так откройте directry.html и добавьте необходимые TARGET.

<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<H3>Directory</H3>

<A HREF="home.html" TARGET="MAIN-WINDOW">Home</A><P>

<A HREF="here.html" TARGET="MAIN-WINDOW">Go here</A><BR>
<A HREF="there.html" TARGET="MAIN-WINDOW">or there</A><P>

or visit<BR>
<A HREF="http://www.yahoo.com/" TARGET="_top">Yahoo</A><BR>
<A HREF="http://home.netscape.com/" TARGET="_top">Netscape</A>

</BODY>
</HTML>

Испытайте вашу Главную Страницу.

Работает довольно хорошо! Теперь только для хихиканья, давайте добавим связь с вашей местной страницы к Professional Web Design. Откройте home.html и вставьте связь. Удостоверитесь, что Вы добавили соответствующий TARGET.

<HTML>
<HEAD>
<TITLE>A Practice Page- Home</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN=center>You are home.</H1>
Welcome to my homepage! This page should be attractive and easy to navigate because my teacher Joe, besides being VERY handsome, has taught me the right way to build Frames!<P>
<CENTER>Enjoy your stay!</CENTER><P>
Visit Joe at <A HREF="http://junior.apk.net/~jbarta/" TARGET="_top">Professional Web Design</A>. </BODY>
</HTML>

Просмотрите завершенный продукт.

Много людей спрашивают, как загрузить два (или больше) фрейма одним щелчком мыши. Это довольно просто сделать небольшим кодом JavaScript. Так как это «специальный случай» и обычно не используется при разработке страниц с фреймами, мы храним материалы такого сорта отдельно. Если Вы хотите добавить это свойство к вашим страницам, просмотрите следующее:

Как загрузить два (или более) фрейма одним щелчком.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


So, you want to make a Web Page!- Lesson 6

Итак, Вы хотите построить Web Страницу!
Урок 6 - Последний!

Имеются превосходные материалы, на которые Вы можете взглянуть.

Таблицы, Формы и Фреймы

Когда вы изучили основ и готовы добавить несколько высоко ударных компонент к вашей web странице, эти три учебника проведут Вас последовательными шагами через основные метки.

<--ОБРАТНО   ???-->

Введение Урок 1 Урок 2 Урок 3 Урок
4 		Урок 5 Урок 6 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Фреймы и Формы.

УКАЗАТЕЛЬ
и
Быстрые Ссылки
Список важных тем, обсужденных в этом учебнике наряду с некоторыми краткими примерами. Кроме того, все внешние связи, приведенные в этом учебнике перечислены ниже.

Элементы связанные с текстом
Полужирный текст
<B>xxxxx</B>
Курсив
<I>xxxxx</I>
Подчеркивание
<U>xxxxx</U>
Моноширинный шрифт
<TT>xxxxx</TT>
Изменение размера шрифта (размер:1-7)
<FONT SIZE=5>xxxxx</FONT>
Изменение имени шрифта (face)
<FONT FACE="NIFTY FONT">xxxxx</FONT>
Изменениеe цвета шрифта
<FONT COLOR="#0000FF"> xxxxx</FONT>
rollercoaster!
Цвета фона
<BODY BGCOLOR="#xxxxxx">
Изменение цвета текста, связей и др.для всей страницы <BODY BGCOLOR="#xxxxxx" TEXT="#xxxxxx" LINK="#xxxxxx" VLINK="#xxxxxx" ALINK="#xxxxxx">
Разрыв строки <BR>
Разрыв абзаца <P>
Код пробела (специальный символ для пробела) &nbsp;
Шесть главных специальных символов
Полный набор специальных символов
Несколько пустых строк &nbsp;<BR>
Комбинации меток-
Перекрытие и Вложенность меток
Больше о
Перекрытии и Вложенности меток

Изображения
Фоновые изображения
BACKGROUND="xxxxx.gif" (or .jpg)
Сохранить изображение страницы
Вставка изображений
<IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456>
Источники Изображений (SRC) подробные пояснения
Создание изображения связи
<A HREF="http://xxxxx"><IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456></A>
Избавление от синей рамки вокруг изображения связи
<A HREF="http://xxxxx"> <IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456 BORDER=O></A>
О размерах изображения
Использование эскизов
Сделать линии из точек 2x2
Невероятный Gif Wizard!

Связи
Добавление связи <A HREF="http://xxxxx">abcdefg</A>
Добавление связи email
<A HREF="mailto:xxxxx@xxx.xxx"> abcdefg</A>
Создание изображения связи
<A HREF="http://xxxxx"><IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456></A>
Избавление от синей рамки вокруг изображения связи<A HREF="http://xxxxx"><IMG SRC="xxxxx.gif" WIDTH=123 HEIGHT=456 BORDER=O></A>
Использование эскизов изображений
Связь с отдельной секцией страницы <A HREF="http://xxxxx#CHEESEWIZ"> abcdefg</A>

Инструменты Форматирования
Центрирование наполнения <CENTER>xxxxx</CENTER>
Разрывы строки <BR>
Разрыв абзаца <P>
Перемещение в полях с <BLOCKQUOTE>
Упорядоченный и Неупорядоченный списки
<UL> (or OL)
<LI>List item
</UL>
Список определений
<DL>
<DT>Definition title
<DD>Definition item
</DL>
Горизонтальная линия
<HR ALIGN=left|right|center WIDTH=80% SIZE=3 NOSHADE>
Метки форматирования <PRE>

Разное
Скелетный документ HTML - минимум требуемых меток
<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
<BODY>
</BODY>
</HEAD>
</HTML>
Цвета фона
<BODY BGCOLOR="#xxxxxx">
Титул документа <TITLE>My Big ole bad page!</TITLE>
Фоновые изображения
BACKGROUND="xxxxx.gif" (or .jpg)
Комбинации меток -
Наложение и Вложение меток
Больше о
Наложении и Вложении меток
Код пробела (специальный символ для пробела) &nbsp;
Шесть главных специальных символов
Полный набор специальных символов
Центрирование наполнения <CENTER>xxxxx</CENTER>
Несколько пустых строк &nbsp;<BR>
Абсолютные и Относительные URL
О разрешающей способности экрана
Метка коментария <!--This is a comment-->
Сохранение документа как HTML файла
Сохранение изображения страницы
О файлах & расширения файлов

Список связей приведенных в этом учебнике

HTML editors- CMed, HTMLpad and HTML Notepad
Paint Shop Pro
 Quickres
 Netscape Navigator
 Yahoo!
 Background color codes
 Netscape's 216 colors
 HTML Special Characters
 HTML Quick Reference Guide
 Cute FTP
 Web Wizard.
Top 10 ways to tell if you have a sucky homepage
 Do's and Don'ts of web site design
 Table Tutor, Form Tutor and Frames Tutor
 The HTML Reference Library and their homepage
 Beginner's Guide to HTML
 Barebones Guide to HTML
 HTML Elements List from Sandia National Laboratories
 The Web Developer's Virtual Library
 Raspberry Hill Publishing


Table Tutor- Lesson 6

Таблицы - Урок 6

А можно иметь таблицу внутри таблицы??
Давайте пробовать. Начните с малого Ed.

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Сделайте таблицу большой.

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Замените Ed на полную таблицу "малый Ed"

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Ed

Наша таблица может также быть очень легко центрирована.

<CENTER>
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>
</CENTER>

Ed

Имеется ситуация, где таблица может решать общую проблему. Это идея для анимации большого gif. Изображение, которое Вы хотите использовать, довольно большое. Так как Вы знаете, что анимированный gif - в основе ряд gif -ов, отображаемых один за другим. Ваши читатели не будут в восторге от 700Кб неповоротливого изображения свалившегося на них. Из-за размера, их браузер зависнет, пробуя отобразить этот gif. Решение. Разрежте на фрагменты и отобразите все изображение как таблицу.

Пример:

Netscape с Microsoft?

Рисунок Boris Vallejo

Имеется та же самая таблица со включенным CELLSPACING.

Netscape с Microsoft?

Единственная часть изображения, которая анимируется - глаза.

Есть html код для этой таблицы. ( Caption - заголовок вообще не требуется и он не имеет никакого влияния на остальные части таблицы)

<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<CAPTION ALIGN=top><FONT SIZE=6><STRONG><EM>Netscape vs. Microsoft?</EM></STRONG></FONT></CAPTION>

<TR>
<TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250
HEIGHT=406></TD>
<TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219
HEIGHT=406></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>

</TABLE>

Это - размещение.

dragon4.gif dragon3.gif dragon5.gif
anidrag.gif
dragon2.gif

Хорошо, но есть еще несколько примеров. Попытайтесь воспроизвести их.

<--ОБРАТНО   ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Уазатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !


Frames Tutor- Lesson 7

Фреймы - Урок 7
(Последний)

Вы узнали все, что Вам необходимо при создании страницы с фреймами. 95 % того, что вам необходимо, может быть выполнено способами, описанными в этом учебнике.

Если Вы хотите добавить связь с узлом , используйте следующее ...

Этот узел, разработан с
небольшой помощью из:
Professional Web Design
Учебники автора HTML

Только захватите вышеупомянутое изображение,
сохраните его как proweb1.gif, и вставьте
следующий код HTML в вашу страницу ...

<CENTER>
<FONT SIZE=2 FACE="Arial">This site designed with<BR>
a little help from:<BR>
<A HREF="http://junior.apk.net/~jbarta/">
<IMG SRC="proweb1.gif" ALT="Professional Web Design"
WIDTH=172 HEIGHT=53 BORDER=0></A><BR>
<I>HTML authoring tutorials</I></FONT>
</CENTER>

Или, если Вы предпочитаете, используйте только изображение ...

Professional Web Design

<A HREF="http://junior.apk.net/~jbarta/">
<IMG SRC="proweb1.gif" ALT="Professional Web Design"
WIDTH=172 HEIGHT=53 BORDER=0></A>

Удостоверьтесь, что proweb1.gif is в той же папке, где и ваша страница.

<--ОБРАТНО   ???-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Таблицы, Формы и Итак, Вы хотите построить Web Страницу !


Table Tutor- Lesson 7

Таблицы - Урок 7
(Последний!)

Вы узнали все, что Вам необходимо при создании страницы с таблицами. 95 % того, что вам необходимо, может быть выполнено способами, описанными в этом учебнике. .

Если Вы хотите добавить связь с узлом , используйте следующее ...

Этот узел, разработан с
небольшой помощью из:
Professional Web Design
Учебники автора HTML

Только захватите вышеупомянутое изображение,
сохраните его как proweb1.gif, и вставьте
следующий код HTML в вашу страницу ...

<CENTER>
<FONT SIZE=2 FACE="Arial">This site designed with<BR>
a little help from:<BR>
<A HREF="http://junior.apk.net/~jbarta/">
<IMG SRC="proweb1.gif" ALT="Professional Web Design"
WIDTH=172 HEIGHT=53 BORDER=0></A><BR>
<I>HTML authoring tutorials</I></FONT>
</CENTER>

Или, если Вы предпочитаете, используйте только изображение ...

Professional Web Design

<A HREF="http://junior.apk.net/~jbarta/">
<IMG SRC="proweb1.gif" ALT="Professional Web Design"
WIDTH=172 HEIGHT=53 BORDER=0></A>

Удостоверьтесь, что proweb1.gif is в той же папке, где и ваша страница.

<--ОБРАТНО   ???-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Указатель
ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН

Фреймы , Формы и Итак, Вы хотите построить Web Страницу !

*** УКАЗАТЕЛЬ МЕТОК И АТРИБУТОВ ТАБЛИЦЫ ***
(те, что объяснены в этом учебнике)

ALIGN в <TD>
BGCOLOR
BORDER
CELLPADDING
CELLSPACING
<CENTER>
COLSPAN
HEIGHT в <TABLE>
 ROWSPAN
<TABLE>
<TD>
<TR>
VALIGN в <TD>
WIDTH в <TABLE>
WIDTH в <TD>


Есть много других интересных мест

dt_title.JPG (19097 bytes)

Есть много других интересных мест, на которые Вы можете взглянуть и почерпнуть там новые знания, навыки и образцы.

The HTML Reference Library
Выдающийся html учебник и источник ссылок в формате HELP Windows. Вы можете даже посетить their homepage.
Beginner's Guide to HTML
Хорошее краткое руководство, которое очень хорошо объясняет основы.
Barebones Guide to HTML
Другое превосходное руководство.
HTML Elements List
Очень полный список меток html от Sandia National Laboratories.
The Web Developer's Virtual Library
Большой источник информации, затрагивающей все аспекты проектирования web и узла (web и site).

Если у Вас проблемы с Английским, то можно найти много материалов на русском языке и различных полезных ссылок

Почти все об Internet...


My Framz Page

 Lisa


Frames Tutor- Example of a common mistake

 Main Page


How to make an Animated GIF

Это пошаговое руководство по основам создания простого анимированного GIF файла.
До начала Вам необходимо иметь несколько вещей;
  1. Программа GIF анимации.

    2. Есть достаточное число доступных программ. Шаги должны быть одинаковыми.
    Для примеров мы использовали Gif Construction Set. Есть его версии для Windows3.х и Windows95;.
    Щелкните здесь , чтобы загрузить последнюю версию условно свободного распространения.

  2. Серию изображений для анимации.

    3. Ниже мы имеем набор, который Вы можете использовать для этого примера. Когда завершите, Вы будете иметь простой анимированный почтовый ящик.

    Щелкните правой кнопкой мыши на каждом изображении и сохраните их на вашем жестком диске. Фон будет сделан прозрачным в шагах анимации.

mail1.gif | mail2.gif | mail3.gif

Давайте начнем!

Это основные необходимые шаги и вполне возможно, что может потребоваться больше работы чем приведено в примерах. Но сделав эти шаги, Вы увидите насколько просто это может быть. Имеется много параметров для квалифицированных пользователей, которые мы не будем рассматривать здесь. Вы сможете экспериментировать с параметрами настройки после того, как Вы сделаете ваш первый анимированный GIF.

  1. Запустите вашу Программу Анимации.
  2. Выберите 'File' затем 'Open'
  3. Найдите, где Вы сохранили mail1.gif
  4. 'Highlight' mail1.gif и выберите 'OK'
    (Двойной щелчок на файле выполняет те же действия)

    5. Два вхождения появятся в списке и вхождение 'Header' будет выделено.
    Если оно не выделено.(щелкните один раз на нем)

  5. Выберите 'Insert', затем выберите 'Control'.
    Вы будете иметь теперь три вхождения в списке.
    Header
    Control
    Image
    В таком порядке!

  6. Дважды щелкните на 'Control' из вашего списка.
    Откроется окно для 'Editing Control Options'.
  7. Пометьте блок 'Transparent colour' .
    Dropper - Пипетка теперь станет активной.
  8. 'Щелкните' на Dropper и появится изображение.
  9. Поместите Dropper на фон и 'щелкните один раз'.
    окно 'Editing Control Options' будет возвращено и '11'
    появится затем рядом с Dropper.
  10. Установите число 'Delay' равное '30'.
    См. 'Control Notes' для большей информации.
  11. Затем рядом с Remove by: Выберите, 'Background'.
  12. Выберите 'OK'.

Вы теперь выполнили первое изображение.

Вы можете щелкнуть на 'View', чтобы видеть, все ли Вы сделали правильно. (mail1.gif должен появиться без фона.)

Вы готовы продолжить?

    Дважды щелкните на вашем списке. Он должен выглядеть подобно этому:
    Header
    Control
    Image
    В таком порядке!

  1. Выделите (один щелчок на нем) вхождение 'Image' .
  2. Выберите 'Insert' затем 'Image'
  3. Найдите, где Вы сохранили mail2.gif
  4. 'Выдеелите' mail2.gif и выберите 'OK'
    (Двойной щелчок на файле выполняет те же действия )
  5. Выберите 'Insert' затем 'Image'
  6. Найдите, где Вы сохранили mail3.gif
  7. 'Выдеелите' mail3.gif и выберите'OK'
    (Двойной щелчок на файле выполняет те же действия )

    8. Ваш список должен выглядеть подобно этому:
    Header
    Control
    Image (mail1.gif)
    Image (mail2.gif)
    Image (mail3.gif)
    В таком порядке!

    Чтобы почтовый ящик открывался и закрывался, вам необходимо добавить mail2.gif снова.

  8. Выберите 'Insert' затем 'Image'
  9. Найдите где Вы сохранили mail2.gif
  10. 'Выделите' mail2.gif и выберите 'OK'
    (Двойной щелчок на файле выполняет те же действия )

    11. Ваш список должен выглядеть подобно этому:

    Header
    Control
    Image (mail1.gif)
    Image (mail2.gif)
    Image (mail3.gif)
    Image (mail2.gif)
    В таком порядке!

Теперь вам необходимо добавить 'Control' для каждого Image.
См. 'Control Notes' для большей информации.

Вы имеете здесь два выбора.
Выбор #1 (Короткий путь) - Выбор #2 (Длинный путь)

Выбор #1 (Наш выбор)

  1. 'Выделите' вхождение 'Control' в списке.
  2. Выберите 'Edit' из Main Tool Bar. (не кнопка)
  3. Выберите 'Copy'
    ИЛИ. . . Вы можете использовать Cotl+C для копирования в буфер обмена.
  4. 'Выделите' Image (mail1.gif) в списке.
  5. Выберите' Edit' из Main Tool Bar. (не кнопка)
  6. Выберите 'Paste'
    ИЛИ. . . Вы можете использовать Cotl+V для копирования в буфер обмена.
  7. 'Выделите' Image (mail2.gif) в списке.
  8. Выберите'Edit' из Main Tool Bar. (не кнопка)
  9. Выберите'Paste'
    ИЛИ. . . Вы можете использовать Cotl+V для копирования в буфер обмена.
  10. 'Выделите' Image (mail3.gif) в списке.
  11. Выберите'Edit' из Main Tool Bar. (не кнопка)
  12. Выберите'Paste'
    ИЛИ. . . Вы можете использовать Cotl+V для копирования в буфер обмена.

    13. Ваш список должен выглядеть подобно этому:

    Header
    Control
    Image (mail1.gif)
    Control
    Image (mail2.gif)
    Control
    Image (mail3.gif)
    Control
    Image (mail2.gif)
    В таком порядке! Вы почти завершили! Если Вы хотите непрерывную циклическую анимацию,

  13. 'Выделите' вхождение 'Header' в списке.
  14. Выберите 'Insert'
  15. Выберите 'Loop'
    См. Опции цикла' для большей информации.

    16. Вы можете выбрать 'View', чтобы просмотреть в действии.
    Это должно выглядеть подобно.
    Щелкните здесь, чтобы увидеть пример.

    Если вы завершили,

  16. Выберите'File' затем 'Save As'
  17. Дайте другое имя затем выберите 'OK'.
    Используйте другое имя для изображений.

Поздравления! Вы имеете завершонную первую вашу анимацию.

Выбор #2 (Длинный путь)

  1. 'Выделите' Image (mail1.gif) в списке.
  2. Выберите 'Insert', затем выберите 'Control'.
  3. 'Двойной щелчок' на новом вхождении 'Control'.
  4. Повторите шаги 6-12 для 'Editing Control Options'
  5. 'Выделите' Image (mail2.gif) в списке.
  6. Выберите 'Insert', затем выберите 'Control'.
  7. 'Двойной щелчок' на новом вхождении 'Control'.
  8. Повторите шаги 6-12 для 'Editing Control Options'
  9. 'Выделите' Image (mail3.gif) в списке.
  10. Выберите'Insert', затем выберите 'Control'.
  11. 'Двойной щелчок' на новом вхождении 'Control'.
  12. Повторите шаги 6-12 для 'Editing Control Options'

    13. Ваш список должен выглядеть подобно этому:

    Header
    Control
    Image (mail1.gif)
    Control
    Image (mail2.gif)
    Control
    Image (mail3.gif)
    Control
    Image (mail2.gif)
    В таком порядке! Вы почти завершили! Если Вы хотите непрерывную циклическую анимацию,

  13. 'Выделите' вхождение 'Header' в списке.
  14. Выберите 'Insert'
  15. Выберите 'Loop'
    См. Опции цикла' для большей информации.

    16. Вы можете выбрать 'View', чтобы просмотреть в действии.
    Это должно выглядеть подобно.
    Щелкните здесь, чтобы увидеть пример.

    Если Вы завершили,

  16. Выберите'File' затем 'Save As'
  17. Дайте другое имя затем выберите 'OK'.
    Используйте другое имя для изображений.

Поздравления! Вы имеете завершонную первую вашу анимацию.

Перейти к : Animations : Free Graphics : Doodles Pad

Control Notes

Each image will need a 'Control' added Above it in the editor's list.

    This will tell a viewer or web browser,

  1. How to display the image. (With or without transparent)
  2. How long to wait before showing the Next image.
  3. What to do with the image when the next one appears.

Use your browser BACK button to return to where you were.

Loop Options

You can make an Animated GIF pause between Loops
by changing the 'Delay' time in the 'Control'.

If you want the mailbox to stay Closed for a while between animations,
Change the 'Delay' time in the 'Control' above mail1.gif.
Set it up to about 120 depending on the delay time you want.

If you want the mailbox to stay Open for a while between animations,
Change the 'Delay' time in the 'Control' above mail3.gif.
Set it up to about 120 depending on the delay time you want.

Use your browser BACK button to return to where you were.


Form Tutor- mailto:Formatter download sites

mailto:Formatter
Узлы Загрузки - Download sites

Для Windows95 1302K
  • ftp://ftp.winsite.com
  • ftp://mirrors.aol.com
  • ftp://ftp.the.net
  • ftp://wuarchive.wustl.edu
Для Windows3.x 343K
  • ftp://ftp.winsite.com
  • ftp://mirrors.aol.com
  • ftp://ftp.the.net
  • ftp://ftp.cdrom.com
Для Mac есть inFormer 986K
  • ftp://ftp.amug.org
  • ftp://mirror.apple.com
  • ftp://ftp.dataplex.net
  • ftp://ftp.agt.net

Сама программа очень маленькая. Большинство того, что Вы загружаете - файлы поддержки, которые Вы уже можете иметь.

ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН


Table Tutor- Do it with a Table!

Таблицы Примеры
 | Это - Таблица!
(ДА, ЭТО ТАБЛИЦА!)

Метки Таблицы - наиболее полезные метки. Далее несколько примеров и идей для Вас. Некоторые могут оказаться полезными. Но все покажут некоторых особенности меток <TABLE>.

Remember, you'll find a whole chartful of background color codes right here.

The Bill of Rights
Passed by Congress September 25, 1789.
Ratified December 15, 1791.

AMENDMENT I
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

AMENDMENT II
A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.

AMENDMENT III
No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

I feel guilty cutting this document short so I figure if I provide a link to the U.S. Constitution in it's entirety, I have made up for the 'wrong'.

Here is the same table with all the borders turned on and all the guts torn out. It will help you visualize how it goes together. Also, it will be easier for you when you look at the source... less cluttered.

The Bill of Rights
Passed by Congress September 25, 1789.
Ratified December 15, 1791.

AMENDMENT I | empty1
text of Amendment I...
AMENDMENT II | empty 2
text of Amendment II...
AMENDMENT III | empty 3
text of Amendment III...

I feel guilty...

Here's a simple chessboard. Not super useful, but making one is great practice! Theoretically you could probably use this with JavaScript and play chess with someone through a web page.

Another (less colorful) example using the Bill of Rights again.

The Bill of Rights Passed by Congress September 25, 1789. Ratified December 15, 1791.
AMENDMENT I | Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
AMENDMENT II | A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.
AMENDMENT III | No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

You can make bar graphs with just table tags and a few colored 2x2 dots. It's not all that hard and once it's done, it's easy to change. Plus it can do things a regular image can't. Like suppose you needed to change it alot. Or what if you made it part of results generated by a CGI, Java, or JavaScript program. This technique lends itself very well to "on-the-fly" graphing.

 |  | Joe's Widget Mfg. Co. Inc. Unit production January-June
RED WIDGETS [image] BLUE WIDGETS [image] TUNE-UP KITS
UNITS in thousands | 150 100 50 0 |  |  |  |  |  |
 |  | JAN | FEB | MAR | APR | MAY | JUN

This is a nice effect. It's kind of a pain to do initially, but updates are easy if you're neat & organized with you're HTML coding.

Punch Gran Cru |  |  |  |  | Honduras
Cigar | Length | Ring | Wrapper | Box of | Price | Single
Britania | 6.25 | 50 | Natural | 25 | 96.75 | 4.55
Diademas | 7.25 | 54 | Natural | 25 | 102.50 | 4.80
Monarcas | 6.75 | 48 | Natural | 10 | 57.00 | 6.40
Prince Consort | 8.5 | 52 | Natural | 10 | 48.00 | 5.65
Robusto | 5.25 | 50 | Maduro | 20 | 75.00 | 4.40
Robusto | 5.25 | 50 | Natural | 20 | 75.00 | 4.40
Superior | 5.5 | 48 | Natural | 25 | 86.50 | 4.05


Form Tutor - A Presidential Quiz - Answers

Вопросник по Президентам США (ответы)
RepDem | RepDem | RepDem | RepDem | RepDem | RepDem
RepDem | RepDem | RepDem | RepDem | RepDem | RepDem

ПРОФЕССИОНАЛЬНЫЙ WEB ДИЗАЙН


ZD Net Quick Poll

Friday,
August 16, 1996

Don't miss this week's special focus on campaign '96 and join in our discussion forum.
----ZD Net

Will you use the Web to follow this year's elections?

Yea! There's nothing like the Web for breaking news on Bill & Bob's Excellent Presidential Adventure.

Nay! No thanks, I'll wait for the made-for-TV mini-series.

Copyright (c) 1996 ZD Net. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of ZD Net is prohibited. ZD Net and the ZD Net logo are trademarks of Ziff-Davis Publishing Company.

webmaster@zd.com


You can even make a r<FONT SIZE=4>o</FONT><FONT SIZE=4>l</FONT><FONT SIZE=5>l</FONT><FONT SIZE=6>e</FONT><FONT SIZE=7>r</FONT><FONT SIZE=7>c</FONT><FONT SIZE=6>o</FONT><FONT SIZE=5>a</FONT><FONT SIZE=4>s</FONT><FONT SIZE=3>t</FONT><FONT SIZE=2>e</FONT><FONT SIZE=1>r!</FONT>


 Ron's friend
Mike


 Ron's friend
Paul


 Ron's friend
Pete


 Ron's friend
Sam


Sample 1

Это таблица...
Наполнение | Больше наполнения | Еще Больше наполнения
Две строки наполнения | Получатель лепешки тети Fanny | И Еще Больше наполнения


My Framz Page

 Shannon


So, you want to make a Web Page!- List of Special Characters

Итак, Вы хотите построить Web Страницу!
Специальные Символы

Этот список скопирован с HTML Quick Reference Guide.

ISO Latin-1 символы

&Agrave;  А  capital A, grave accent      &iuml;    п  small i, diжresis/umlaut
&agrave;  а  small a, grave accent        &ETH;     Р  capital Eth, Icelandic
&Aacute;  Б  capital A, acute accent      &eth;     р  small eth, Icelandic
&aacute;  б  small a, acute accent        &Ntilde;  С  capital N, tilde
&Acirc;   В  capital A, circumflex        &ntilde;  с  small n, tilde
&acirc;   в  small a, circumflex          &Ograve;  Т  capital O, grave accent
&Atilde;  Г  capital A, tilde             &ograve;  т  small o, grave accent
&atilde;  г  small a, tilde               &Oacute;  У  capital O, acute accent
&Auml;    Д  capital A, diжresis/umlaut   &oacute;  у  small o, acute accent
&auml;    д  small a, diжresis/umlaut     &Ocirc;   Ф  capital O, circumflex
&Aring;   Е  capital A, ring              &ocirc;   ф  small o, circumflex
&aring;   е  small a, ring                &Otilde;  Х  capital O, tilde
&AElig;   Ж  capital AE ligature          &otilde;  х  small o, tilde
&aelig;   ж  small ae ligature            &Ouml;    Ц  capital O, diжresis/umlaut
&Ccedil;  З  capital C, cedilla           &ouml;    ц  small o, diжresis/umlaut
&ccedil;  з  small c, cedilla             &Oslash;  Ш  capital O, slash
&Egrave;  И  capital E, grave accent      &oslash;  ш  small o, slash
&egrave;  и  small e, grave accent        &Ugrave;  Щ  capital U, grave accent
&Eacute;  Й  capital E, acute accent      &ugrave;  щ  small u, grave accent
&eacute;  й  small e, acute accent        &Uacute;  Ъ  capital U, acute accent
&Ecirc;   К  capital E, circumflex        &uacute;  ъ  small u, acute accent
&ecirc;   к  small e, circumflex          &Ucirc;   Ы  capital U, circumflex
&Euml;    Л  capital E, diжresis/umlaut   &ucirc;   ы  small u, circumflex
&euml;    л  small e, diжresis/umlaut     &Uuml;    Ь  capital U, diжresis/umlaut
&Igrave;  М  capital I, grave accent      &uuml;    ь  small u, diжresis/umlaut
&igrave;  м  small i, grave accent        &Yacute;  Э  capital Y, acute accent
&Iacute;  Н  capital I, acute accent      &yacute;  э  small y, acute accent
&iacute;  н  small i, acute accent        &THORN;   Ю  capital Thorn, Icelandic
&Icirc;   О  capital I, circumflex        &thorn;   ю  small thorn, Icelandic
&icirc;   о  small i, circumflex          &szlig;   Я  small sharp s, German sz
&Iuml;    П  capital I, diжresis/umlaut   &yuml;    я  small y, diжresis/umlaut

Дополнительные символы из ISO 8859-1

&#160; &nbsp;     non-breaking space          &#177; &plusmn; ± plus-or-minus sign
&#161; &iexcl;  Ў inverted exclamation mark   &#178; &sup2;   І superscript two
&#162; &cent;   ў cent sign                   &#179; &sup3;   і superscript three
&#163; &pound;  Ј pound sign                  &#180; &acute;  ґ acute accent
&#164; &curren; ¤ general currency sign       &#181; &micro;  µ micro sign
&#165; &yen;    Ґ yen sign                    &#182; &para;   ¶ pilcrow (paragraph sign)
&#166; &brvbar; ¦ broken (vertical) bar       &#183; &middot; · middle dot
&#167; &sect;   § section sign                &#184; &cedil;  ё cedilla
&#168; &uml;    Ё umlaut/dieresis             &#185; &sup1;   № superscript one
&#169; &copy;   © copyright sign              &#186; &ordm;   є ordinal indicator, male
&#170; &ordf;   Є ordinal indicator, fem      &#187; &raquo;  » angle quotation mark, right
&#171; &laquo;  « angle quotation mark, left  &#188; &frac14; ј fraction one-quarter
&#172; &not;    ¬ not sign                    &#189; &frac12; Ѕ fraction one-half
&#173; &shy;     soft hyphen                 &#190; &frac34; ѕ fraction three-quarters
&#174; &reg;    ® registered sign             &#191; &iquest; ї inverted question mark
&#175; &macr;   Ї macron                      &#215; &times;  Ч multiply sign
&#176; &deg;    ° degree sign                 &#247; &div;    ч division sign


Ten Ways for Home Page

10 способов сделать не хорошую Home Page и некоторые советы

10/FONT> Большое изображение Вашего заголовка- более 50КБ!

9 [Picture of a Canyon with a big arrow pointing at a tiny person in the corner] Выжные мелкие детали - 20КБ на крупном рисунке - 400КБ!

8 [image] Много изображений ваших домашних животных.

" ... и это - мой кот: Пушистый. Это - моя собака: Джек. Это - моя Лама. Это - мой дельфин: Флиппи ... "

7 [image] Неприятная фоновая музыка.

Может быть нужно убрать звук полностью? Нет!

Фоновая музыка и звук делают для большого восприятия на Internet, но Вы должны дать вашему читателю выбор. Не устанавливайте вашу фоновую музыку или звук на автоисполнение. Позвольте пользователю решать самому, нажимать ему кнопку воспроизведения или нет, по желанию.

Всегда показывайте объем и средства управления воспроизведением любой фоновой музыки или звука так, чтобы пользователь имел выбор остановить исполнение или вернуться назад для повторения. Удостоверитесь, что управление хорошо видимо.

6 [image] Вы используете плохой сканер.

5 [image] Телеграфная лента в строке состояния

Не используйте их. Ничего кроме резкого замедления загрузки это не дает.

4 [Picture of a Construction GIF with bullet holes in it] Вы используете рисунок реконструкции на вашей странице.

Если ваша страница действительно находится на реконструкции, тогда поместите днимают временное примечание, которое сообщает об этом. Убедитесь, что сообщение действует, когда она будет завершена, удалите примечание!

3 [Picture of Resume] Ваша страница состоит из отчаянной просьбы работы.

2 [That text that says BLINK is blinking] Блики.

Попробуйте использовать вместо бликов Полужирный или
текст Большого Размера для выделения вашей мысли.

1 [Picture of a Trophy] Вы находитесь в вашем собственном Горячем Списке!

О фоне

Помните: нет ничего лучше черного текста на белом фоне!

Если Вы решили использовать изображение в качестве фона используйте редактор фотографий для осветления .

Это может быть выполнено использованием Adjust Brightness & Contrast в Photoshop или PhotoPaint.

Или Вы можете пробовать использовать фоны с очень небольшим контрастом. Контраст - отличие между различными цветами вашего фона. Тонкие дисперсии означают меньший контраст. Чем меньше контраст вашего фонового изображения, тем проще будет читаться текст на этом фоне .

Храните ваши фоны в файлах малого размера. Большинство фонов не должно быть большим или детализированным. Помните, чем больше деталей, тем труднее будет читать текст на вашем фоне!

Если Вы сохраняете ваш фон как JPEG, используйте самую низкую установку качества. Если Вы используете формат GIF для вашего фона, подумайте использование 4-разрядной палитры.

Используйте сплошной (одноцветный) фон для страниц, которые содержат большое количества текста.

О Фреймах

Или потратьте время, чтобы узнать, как управлять вашими фреймами внутри HTML, или Вы можете просто не использовать фреймы на вашем узле. К сожалению, даже если Вы хорошо осведомлены о фреймах, ваши посетители могут не так хорошо знать о них ...

Это означает, что фреймы никогда не нужно использовать? Абсолютно нет!

Если Вы решили использовать фреймы, есть некоторые советы, которые следует иметь в виду:

  • Не используйте относительную ширину (например 40 %) для левых или верхних фреймов. Всегда используйте абсолютную ширину (например 250 пикселей).
  • Убедитесь, что оставили достаточно пространства для "смещения", которое может происходить на некоторых компьютерах ваших посетителей.
  • Всегда определите TARGET ="_top" для связей, которые идут с вашего узла. Таким образом Ваши посетители не будут застревать в одном из ваших фреймов.
  • Не используйте фрейм меню только для четырех, пяти связей, которые могут легко реализованы в отдельным меню навигации на фактической странице.

    • О Image Map

    Продумайте разбиение вашего Изображения Карты - Image Map на меньшие изображения. Меньшие изображения дают пользователю большее обратной связи о том, что является чувствительным к щелчкам мыши, а что - нет.

    Не создайте Image Map, если Вы имеете только несколько связи. Хороший пример - карта государства. Вы щелкаете на регионе для перехода к этому региону. Плохой пример несколько кнопок навигации.

    Если Вы решили использовать Image Maps, есть несколько советов:

    • Храните их малыми! Не создайте только одно гигантское Image Map.
    • Всегда обеспечивайте альтернативные связи под Image Map ко всем связям в Image Map.
    • Делайте очевидным, что является чувствительным к щелчкам мыши. Очевидное для Вас не означает, что это очевидно для ваших посетителей!

    Гибкая ширина окна

    При проектировании ваших страниц, разрабатывайте их для экрана с самым низким общим знаменателем ширины, а не ширины вашего экрана! Удобно делать ширину 620 пикселей.

    Если ваши изображения выравнены по левой или правой границе, не делайте их более широкими чем 400 пикселей.

    О эскизах

    Эскизы просто изготовить.

    В Photoshop откройте ваше полноразмерное изображение.

    Выберите Image Size... в меню Image:

    Убедитесь, что переключатель File Size выключен.

    Примечание: Можно работать в пикселях или в дюймах. Выбрать единицы можно в всплывающем меню.

    В поле Width наберите новую ширину.

    Если Вы делаете отдельные эскизы из различных файлов, делайте их одинаковыми по ширине и/или высоте. Это упростит просмотр ваших эскизов.

    В PhotoPaint в меню Image Menu выберите Resample... Проделайте то же самое, что Вы делали в Photoshop.

    Когда выберите размер, сохраните ваш эскиз как JPEG с LOW качеством/HIGH сжатием. Например, можно из исходного изображения размером 38K изготовить эскиз менее 2K.

    Теперь снабдите ваш эскиз связью, подобно этому:

    <A HREF="ImageRegularSize.jpg"><IMG SRC="ImageThumbnail.jpg"></A>

    О размерах изображений

    Для ускорения загрузки всегда добавляйте Высоту и Ширину к вашим изображениям:

    <IMG HEIGHT=XXX WIDTH=XXX SRC="picture.gif">

    (X X в пикселях.)

    Альтернативные надписи

    Если Вы выключите "Autoload images" в Netscape Navigator, ваши страницы загрузятся намного быстрее. Дайти вашему посетителю возможность определять, какие изображения ожидаются.

    Метки ALT очень просто добавить...

    Необходимо создать HTML подобно этому:

    <IMG SRC="MyCar.gif" ALT="Picture of my neato car">

    Подпишитесь!

    Не забывайте добавлять адрес электронной почты на страницу. Чтобы вкючить адрес запишите HTML подобно этому:

    Email me at <A HREF="mailto:address@here.com">address@here.com</A>

    Статус вашей информации

    Нужно показать статус вашей информации. Когда она последний раз обновлялась? Полная ли она? Какую область она охватывает? Поставьте на документе дату его создания и последней модификации.

    Сделайте ваш гипертекст читаемым.

    Это всего два замечания на тему стилей, которые встречаются в сети и которые не очень удачны.

    Первый - синдром _здесь_ :
    Информация о KUKUKU доступна _здесь_,
    Лучше сказать:
    Вы можете подробнее узнать о _KUKUKU_.
    И лучше написать
    Информация о том, _как осуществлять поиск_ теперь доступна.
    вместо
    Чтобы узнать, как осущуствлять поиск, выберете _эту ссылку_.

    Другой случай, связан с тем, что хотя для ссылок и используются ключевые слова, но

    все равно речь идет о ссылках:
    Вот ссылка на _технические подробности_.
    Такого стоит избегать и писать текст так, чтобы он был нормально читался.
    Вы можете узнать так же и о _технических подробностях_.


Magic Buttons Target

* TARGET *


Magic Buttons Target

* TARGET TOO! *


My Framz Page

 Terri


A Practice Page- There

This is There

I would like to make a proposal. We have all seen that little arrow on signs that say "You are here". Wouldn't it be better if there were also another arrow that says "You should be there". It would make things so much easier.


My Framz Page

 Tina


Table Tutor- Do it with a Table!

Это - Таблица!

Это - относительно простая таблица. Она использует коричневую точку - > , черную точку - > и прозрачную точка - > (да, она - действительно есть здесь).

 | Это - Таблица!
(ДА, ЭТО - ТАБЛИЦА!)

Точно та же самое, с включенными рамками и использованием всех прозрачных точек.

 | Это - Таблица!
(ДА, ЭТО - ТАБЛИЦА!)

Это же - с включенными рамками и прозрачными точками, замененными на зеленые точки.

 | Это - Таблица!
(ДА, ЭТО - ТАБЛИЦА!)


Teleport Pro Messages

 .

http://junior.apk.net/~jbarta/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://home.netscape.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.halcyon.com/artamedia/webwizard/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/submit.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

ftp://aloha.net/pub/users/mdon/htmlib9530.zip: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

http://junior.apk.net/~jbarta/weblinks/newest.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://subnet.virtual-pc.com/~le387818/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/lines.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://werbach.com/barebones/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/photos.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/backgrounds.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.sandia.gov/sci_compute/elements.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.sandia.gov/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/java.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.stars.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/sounds.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/vrml.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.iap.net.au/~cmathes/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.machaon.ru/digest/index.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/hxml.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.intermania.com/~imania/htmlpad.htm: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/tools.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.cranial.com/software/htmlnote/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/cgi.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/weblinks/misc.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/tutor/makapage/index.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.tornado.be/~johnfg/index.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.bashedu.ru/webtut/ani_gif/Quick_Start_ru.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/Table/index.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/Form/index.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/Frame/index.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.yahoo.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.jasc.com/psp.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.raspberryhill.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.raspberryhill.com/bin/gifwiz?url=http://&red=GIF%20Wizard!&green=FF&blue=FF: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.uroulette.com:8000/cgi-bin/rand_reloc: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.microsoft.com/windows/download/quik_res.exe: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.intermania.com/~imania/htmlpad.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.cuteftp.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.glover.com/sucky.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.netscape.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.glover.com/dd.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.ucc.ie/~pflynn/books/htmlcard.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/tutor/tables/index.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/tutor/forms/index.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://junior.apk.net/~jbarta/tutor/frames/index.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.mindworkshop.com/alchemy/gifcon.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.artdzn.com/doodles/grafx/anigif/animatn1.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.artdzn.com/doodles/grafx/grafx1.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.artdzn.com/doodles/index.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://web16.zdnet.com/adverts/nph-ct/r024/c00205/a00667/info.netscape.com/czdn8_e: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/home/graphics/phase2/nav.map: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/home/filters/main.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/zdi/focus/960812.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/home/graphics/phase2/zdmrkt.map: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/zdi/quikpoll2/vote.cgi?pollid=839874523&vote=a: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/zdi/quikpoll2/vote.cgi?pollid=839874523&vote=b: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/zdi/quikpoll2/polls/839874523/results.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://community.zdnet.com/discuss/bin/nph-declare.cgi?type=forums&mag=quickpoll: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/zdi/quikpoll2/oldpolls.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/home/graphics/phase2/navall.map: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.zdnet.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

ftp://ftp.sunet.se/pub/pictures/fantasy/Boris.Vallejo/: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

http://www.bashedu.ru/webtut/ss.html: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

ftp://ftp.winsite.com/pub/pc/win95/misc/mtf50_32.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://mirrors.aol.com/pub/cica/pc/win95/misc/mtf50_32.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://ftp.the.net/mirrors/ftp.winsite.com/pc/win95/misc/mtf50_32.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://wuarchive.wustl.edu/systems/ibmpc/win95/misc/mtf50_32.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://ftp.winsite.com/pub/pc/win3/misc/mtf50_16.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://mirrors.aol.com/pub/cica/pc/win3/misc/mtf50_16.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://ftp.the.net/mirrors/ftp.winsite.com/pc/win3/misc/mtf50_16.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://ftp.cdrom.com/pub/cica/win3/misc/mtf50_16.exe: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://ftp.amug.org/pub/mirrors/info-mac/text/html/informer-20.hqx: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://mirror.apple.com/mirrors/Info-Mac.Archive/text/html/informer-20.hqx: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://ftp.dataplex.net/pub/info-mac/text/html/informer-20.hqx: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

ftp://ftp.agt.net/pub/info-mac/text/html/informer-20.hqx: This file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher or ftp).

.

http://junior.apk.net/~jbarta/tutor/tables/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.bashedu.ru/webtut/buttons/examples/target.html: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.cs.indiana.edu/statecraft/constitution.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.

.

http://www.bashedu.ru/webtut/frame/practic2/banner.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/frame/practic2/directry.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/frame/practic2/home.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/frame/practic2/here.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/frame/practic2/there.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.

.

http://www.bashedu.ru/webtut/frame/load_two/direct03.htm: This file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.